<template>
  <div class="main-body">

    <div class="boatmonitor-container" id="boatmonitor-container">
      <!--地图区域-->
      <div id="map-container">
      </div>
      <!--header区域-->
      <div class="header">
        <div class="header-left">
          <img src="../../../assets/img/porpoise_icon.png" class="porpoise-icon"/>
          <img src="../../../assets/img/header_left_icon.png" class="header-left-icon"/>
        </div>
        <div class="header-center">
          <div class="header-title" :style="{fontSize:headerTitleFontSize+'px'}">
            <span>{{ scenic.scenicShortName }}智能电动游艇运营中心</span>
            <!--            <el-button type="primary" @click="handleTest1">测试</el-button>-->
          </div>
        </div>
        <div class="header-right">
          <div class="header-right-container">
            <img src="../../../assets/img/header_right_icon.png" class="header-right-icon"/>
            <div class="header-right-info">
              <!--位置及气温信息-->
              <div class="location-info">
                <div style="display: flex;align-items: center">
                  <img src="../../../assets/img/location_icon.png">
                  <span style="padding-left: 5px;display: inline-block">{{ weatherInfo.city }}</span>
                </div>
                <div style="display: flex;justify-content: flex-end;margin-top: 3px">
                  <span>{{ weatherInfo.minTemp }}-{{ weatherInfo.maxTemp }}°C</span>
                </div>
              </div>

              <!--分割线-->
              <div class="divider-item"></div>

              <!--天气信息-->
              <div class="weather-info">
                <div style="display: flex;align-items: center">
                  <img src="../../../assets/img/weather-icon.png">
                  <span style="padding-left: 5px;display: inline-block">{{ weatherInfo.weather }}</span>
                </div>
                <div style="display: flex;justify-content: flex-end">
                  <span>风力</span> <span style="margin-left: 5px">{{ weatherInfo.wind }}级</span>
                </div>
              </div>

              <!--分割线-->
              <div class="divider-item"></div>

              <!--日期信息-->
              <div class="date-info">
                <div style="display: flex;justify-content:center;align-items: center">
                  <span>{{ day }}</span>
                </div>
                <div style="display: flex;justify-content: flex-end;margin-top: 3px">
                  <span>{{ year }}/{{ month }}/{{ date }}</span>
                </div>
              </div>

              <!--分割线-->
              <div class="divider-item"></div>

              <!--时间信息-->
              <div class="time-info">
                <div style="display: flex;justify-content:center;align-items: center">
                  <span style="font-size: 20px;font-weight: 700">{{ currTime }}</span>
                </div>
              </div>
            </div>
            <el-dropdown class="more-settings-dropdown" trigger="click" @command="handleCommand">
              <!--            <el-dropdown class="more-settings-dropdown" trigger="click">-->
              <div class="avatar-wrapper">
                <img src="../../../assets/img/setting-icon.png">
              </div>
              <el-dropdown-menu class="el-dropdown-menu">
                <el-dropdown-item command="profile">个人中心</el-dropdown-item>
                <!--                <router-link :to="{ name: 'user'}" target="_blank">-->
                <!--                  <el-dropdown-item>设置</el-dropdown-item>-->
                <!--                </router-link>-->
                <el-dropdown-item command="setting">设置</el-dropdown-item>
                <el-dropdown-item @click.native="logout">
                  <span>退出登录</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>

      <div class="center-left">
        <!--实时累计金额区域-->
        <div class="realtime-money">
          <!--标题-->
          <div class="realtime-money-title">
            <div class="realtime-money-title-icon">
              <img src="../../../assets/img/money-icon.png" alt="">
            </div>
            <div class="realtime-money-title-text">
              <span>实时累计金额</span>
            </div>
          </div>
          <!--金额-->
          <div class="realtime-money-amount">
            <div class="realtime-money-amount-value-show-switch">
              <img v-if="moneyAmountValueShow" src="../../../assets/img/eye-opened.png">
              <img v-else src="../../../assets/img/eye-closed.png">
            </div>
            <div class="realtime-money-amount-value">
              <div v-if="moneyAmountValueShow">
                <CountTo
                  ref="accumulatedTotalIncomeCountTo"
                  :startVal='accumulatedTotalIncomeStartVal'
                  :endVal='accumulatedTotalIncomeEndVal'
                  :duration='2500'
                  :decimals="2"
                  separator=","
                  prefix="￥"
                  :autoplay="true"
                >
                </CountTo>
                <span
                  style="margin-left: 5px;font-size: 24px">元</span>
              </div>
              <!--              <span v-if="moneyAmountValueShow">{{ accumulatedTotalIncome }}<span-->
              <!--                style="margin-left: 5px;font-size: 24px">元</span></span>-->
              <span v-else>*******</span>
            </div>
          </div>
        </div>

        <div class="history-money-show-switch-zoom">
          <img id="historyMoneySwitchIcon" src="../../../assets/img/history-money-down-icon.png"
               title="点击下拉显示往期金额图表">
        </div>

        <!--往期金额区域-->
        <div class="history-money">
          <!--标题-->
          <div class="history-money-title">
            <div class="history-money-title-icon">
              <img src="../../../assets/img/history-money-icon.png" alt="">
            </div>
            <div class="history-money-title-text">
              <span>往期金额</span>
            </div>
          </div>
          <div class="history-money-info-more-control">
            <img src="../../../assets/img/more-icon.png" alt="">
          </div>
          <!--往期金额查看图表区-->
          <div class="history-money-diagram" ref="historyMoneyDiagram">
          </div>

          <div class="history-money-diagram-control-zoom">
            <div class="history-money-diagram-control-progress">
              <img src="../../../assets/img/history-money-diagram-control-progress-left.png"
                   @click="switchDiagramDataIndexLeft">
              <!--              <progress value="60" max="100"></progress>-->
              <el-progress :percentage="currProgressValue" :stroke-width="8" status="success" color="#72ddda"
                           :show-text="false"></el-progress>
              <img src="../../../assets/img/history-money-diagram-control-progress-right.png"
                   @click="switchDiagramDataIndexRight">
            </div>
            <div class="history-money-diagram-control-button">
              <img src="../../../assets/img/history-money-diagram-plus-icon.png" @click="increaseDiagramShowLevel">
              <img src="../../../assets/img/history-money-diagram-minus-icon.png" @click="decreaseDiagramShowLevel">
            </div>
          </div>
        </div>

        <!--运营动态区域-->
        <div class="opration-status" v-show="!isHistoryMoneyExpand">
          <!--标题-->
          <div class="opration-status-title">
            <div class="opration-status-title-icon">
              <img src="../../../assets/img/operation-status-icon.png" alt="">
            </div>
            <div class="opration-status-title-text">
              <span>运营动态</span>
              <span>动态显示最新5条运营信息</span>
            </div>
            <div class="operation-status-info-more-control">
              <el-popover
                ref="operationStatusPopover"
                placement="right"
                visible-arrow="true"
                popper-class="operation-status-popover"
                @show="operationStatusPopoverShow"
                @hide="operationStatusPopoverHiden"
                trigger="click">
                <el-tabs v-model="operationStatusTabsActiveName" @tab-click="handleClick">
                  <el-tab-pane label="今日所有运营动态" name="first">
                    <el-table
                      :data="todayAllOperationDynamicInfoArr"
                      style="width: 100%;"
                      height="750px"
                      :row-class-name="operationStatusTableRowClassName"
                      :header-row-class-name="tableHeaderRowClassName"
                      :header-cell-style="{
                 textAlign: 'center',
                 background: 'rgba(26,143,178,0.4)'
              }"
                      :cell-style="tableCellstyle"
                      :default-sort="{prop: 'time', order: 'ascending'}"
                    >
                      <el-table-column
                        label="序号"
                        type="index"
                        align="center"
                        width="65">
                      </el-table-column>
                      <el-table-column
                        prop="content"
                        label="运营动态"
                        align="left"
                        :show-overflow-tooltip="true"
                      >
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="历史运营动态" name="second">
                    <el-date-picker
                      v-model="selectedHistoryDateForOperationDynamicInfo"
                      type="date"
                      placeholder="选择日期">
                    </el-date-picker>
                    <el-table
                      :data="assignedDayAllOperationDynamicInfoArr"
                      style="width: 100%"
                      height="750px"
                      :row-class-name="operationStatusTableRowClassName"
                      :header-row-class-name="tableHeaderRowClassName"
                      :header-cell-style="{
                 textAlign: 'center',
                 background: 'rgba(26,143,178,0.4)'
              }"
                      :cell-style="tableCellstyle"
                      :default-sort="{prop: 'time', order: 'ascending'}"
                    >
                      <el-table-column
                        label="序号"
                        type="index"
                        align="center"
                        width="65">
                      </el-table-column>
                      <el-table-column
                        prop="content"
                        label="运营动态"
                        align="left"
                        :show-overflow-tooltip="true"
                      >
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>
                </el-tabs>
                <!--              <el-button slot="reference">click 激活</el-button>-->
                <!--              <img src="../../../assets/img/more-icon.png" alt="" slot="reference">-->
              </el-popover>
              <img src="../../../assets/img/more-icon.png" v-popover:operationStatusPopover alt=""
                   title="点击查看全部运营动态">
            </div>
          </div>
          <!--运营动态信息-->
          <div class="operation-status-info">
            <ul v-if="lastOperationDynamicInfoArr.length>0">
              <li v-for="(item,index) in lastOperationDynamicInfoArr" :key="item.operationInfoId">{{ item.content }}
              </li>
            </ul>
            <div v-else style="text-align: center;margin-top: 15px">
              <span style="color: grey">暂无数据</span>
            </div>
          </div>

        </div>

        <!--报警动态区域-->
        <div class="alarm-status" v-show="!isHistoryMoneyExpand">
          <!--标题-->
          <div class="alarm-status-title">
            <div class="alarm-status-title-icon">
              <img src="../../../assets/img/alarm-icon.png" alt="">
            </div>
            <div class="alarm-status-title-text">
              <span>报警动态</span>
              <span>动态显示最新5条报警信息</span>
            </div>
            <div class="alarm-status-info-more-control">
              <el-popover
                ref="popover"
                placement="right"
                visible-arrow="true"
                width="810"
                popper-class="alarm-status-popover"
                @show="alarmStatusPopoverShow"
                @hide="alarmStatusPopoverHiden"
                trigger="click">
                <el-tabs v-model="alarmStatusTabsActiveName" @tab-click="handleClick">
                  <el-tab-pane label="今日所有报警动态" name="first">
                    <el-table
                      :data="todayAllAlarmInfoArr"
                      style="width: 100%"
                      height="750px"
                      :row-class-name="alarmInfoTableRowClassName"
                      :header-row-class-name="tableHeaderRowClassName"
                      :header-cell-style="{
                 textAlign: 'center',
                 background: 'rgba(26,143,178,0.4)'
              }"
                      :cell-style="tableCellstyle"
                      :default-sort="{prop: 'time', order: 'ascending'}"
                    >
                      <el-table-column
                        label="序号"
                        type="index"
                        align="center"
                        width="50">
                      </el-table-column>
                      <el-table-column
                        prop="createTime"
                        label="时间"
                        align="center"
                        width="120"
                        :formatter="alarmStatusCreateTimeFormatter"
                        sortable
                        :show-overflow-tooltip="true"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="boatCode"
                        label="船编号"
                        align="center"
                        width="85"
                        :show-overflow-tooltip="true"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="content"
                        width="90"
                        align="left"
                        label="报警内容"
                        :show-overflow-tooltip="true"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="phone"
                        width="120"
                        align="center"
                        label="联系电话"
                        :show-overflow-tooltip="true"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="status"
                        width="110"
                        align="center"
                        sortable
                        label="状态">
                        <template slot-scope="scope">
                          <el-select v-if="isAlarmStatusEditing&&currEditingIndex===scope.$index"
                                     v-model="alarmStatusValue" placeholder="请选择"
                                     size="mini">
                            <el-option
                              v-for="item in alarmStatusOptions"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                          <!--                        <el-tag v-show="!isAlarmStatusEditing||currEditingIndex!==scope.$index" size="mini" effect="dark"-->
                          <el-tag v-else size="mini" effect="dark"
                                  :type="scope.row.status === 0 ? 'danger' : (scope.row.status === 1 ?'info' : 'success')">
                            {{ scope.row.status === 0 ? '未处理' : (scope.row.status === 1 ? '已消除' : '已处理') }}
                          </el-tag>

                        </template>
                      </el-table-column>
                      <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                          <el-popover
                            ref="popover-child"
                            placement="right"
                            visible-arrow="true"
                            width="150"
                            popper-class="alarm-status-popover-child"
                            trigger="click">
                            <el-select v-model="alarmStatusValue" placeholder="请选择">
                              <el-option
                                v-for="item in alarmStatusOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                              </el-option>
                            </el-select>
                          </el-popover>

                          <el-row v-if="isAlarmStatusEditing&&currEditingIndex===scope.$index">
                            <el-button
                              size="mini"
                              type="success"
                              @click="saveAlarmStatus"
                            >保存
                            </el-button>
                            <el-button
                              size="mini"
                              type="warning"
                              @click="cacelAlarmStatusEditing"
                            >取消
                            </el-button>
                          </el-row>
                          <el-button
                            v-else
                            size="mini"
                            type="primary"
                            @click="handleElTagClicked(scope.$index,scope.row)"
                          >标记
                          </el-button>

                        </template>
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="历史报警动态" name="second">
                    <el-date-picker
                      v-model="selectedDateForHistoryAlarmInfoList"
                      type="date"
                      placeholder="选择日期">
                    </el-date-picker>
                    <el-table
                      :data="assignedDayAllAlarmInfoArr"
                      style="width: 100%"
                      height="750px"
                      :row-class-name="alarmInfoTableRowClassName"
                      :header-row-class-name="tableHeaderRowClassName"
                      :header-cell-style="{
                 textAlign: 'center',
                 background: 'rgba(26,143,178,0.4)'
              }"
                      :cell-style="tableCellstyle"
                      :default-sort="{prop: 'time', order: 'ascending'}"
                    >
                      <el-table-column
                        label="序号"
                        type="index"
                        align="center"
                        width="50">
                      </el-table-column>
                      <el-table-column
                        prop="alarmInfoId"
                        label="ID"
                        align="center"
                        width="60"
                        sortable
                        :show-overflow-tooltip="true"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="time"
                        label="时间"
                        align="center"
                        width="100"
                        :formatter="alarmStatusCreateTimeFormatter"
                        sortable
                        :show-overflow-tooltip="true"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="boatCode"
                        label="船编号"
                        align="center"
                        width="75"
                        :show-overflow-tooltip="true"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="content"
                        width="90"
                        align="left"
                        label="报警内容"
                        :show-overflow-tooltip="true"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="phone"
                        width="120"
                        align="center"
                        label="联系电话"
                        :show-overflow-tooltip="true"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="status"
                        width="110"
                        align="center"
                        sortable
                        label="状态">
                        <template slot-scope="scope">
                          <el-select v-if="isHistoryAlarmStatusEditing&&currEditingHistoryAlarmInfoIndex===scope.$index"
                                     v-model="scope.row.status" placeholder="请选择"
                                     size="mini">
                            <el-option
                              v-for="item in alarmStatusOptions"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                          <!--                        <el-tag v-show="!isAlarmStatusEditing||currEditingIndex!==scope.$index" size="mini" effect="dark"-->
                          <el-tag v-else effect="dark"
                                  :type="scope.row.status === 0 ? 'danger' : (scope.row.status === 1 ?'info' : 'success')">
                            {{ scope.row.status === 0 ? '未处理' : (scope.row.status === 1 ? '已消除' : '已处理') }}
                          </el-tag>

                        </template>
                      </el-table-column>
                      <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                          <el-popover
                            ref="popover-child"
                            placement="right"
                            visible-arrow="true"
                            width="150"
                            popper-class="alarm-status-popover-child"
                            trigger="click">
                            <el-select v-model="alarmStatusValue" placeholder="请选择">
                              <el-option
                                v-for="item in alarmStatusOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                              </el-option>
                            </el-select>
                          </el-popover>

                          <el-row v-if="isHistoryAlarmStatusEditing&&currEditingHistoryAlarmInfoIndex===scope.$index">
                            <el-button
                              size="mini"
                              type="success"
                              @click="saveHistoryAlarmStatusChange(scope.$index,scope.row)"
                            >保存
                            </el-button>
                            <el-button
                              size="mini"
                              type="warning"
                              @click="cacelHistoryAlarmStatusChange"
                            >取消
                            </el-button>
                          </el-row>
                          <el-button
                            v-else
                            size="mini"
                            type="primary"
                            @click="handleHistoryAlarmInfoStatusMarkButtonClicked(scope.$index,scope.row)"
                          >标记
                          </el-button>

                        </template>
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>
                </el-tabs>
                <!--              <el-button slot="reference">click 激活</el-button>-->
                <!--              <img src="../../../assets/img/more-icon.png" alt="" slot="reference">-->
              </el-popover>
              <img src="../../../assets/img/more-icon.png" alt="" v-popover:popover title="点击查看全部报警动态">
            </div>
          </div>

          <div class="alarm-status-info-list" style="margin-top: 10px">
            <el-table
              :data="lastAlarmInfoArr"
              style="width: 100%;min-height: 200px"
              :row-class-name="alarmInfoTableRowClassName"
              :header-row-class-name="latestAlarmTableHeaderRowClassName"
              :header-cell-style="{
                 textAlign: 'center',
                 background: 'rgba(8, 101, 129, 0.6)'
              }"
              :cell-style="tableCellstyle"
              :default-sort="{prop: 'time', order: 'ascending'}"
              tooltip-effect="dark"
            >
              <el-table-column
                prop="createTime"
                label="时间"
                align="center"
                width="100"
                :formatter="alarmStatusCreateTimeFormatter"
                sortable
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                prop="boatCode"
                label="船编号"
                align="center"
                width="65"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                prop="content"
                width="90"
                align="left"
                label="报警内容"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                prop="phone"
                width="110"
                align="center"
                label="联系电话"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                prop="status"
                align="center"
                label="状态">
                <template slot-scope="scope">
                  <el-tag size="mini" effect="dark"
                          :type="scope.row.status === 0 ? 'danger' : (scope.row.status === 1 ?'info' : 'success')">
                    {{ scope.row.status === 0 ? '未处理' : (scope.row.status === 1 ? '已消除' : '已处理') }}
                  </el-tag>

                </template>
              </el-table-column>
            </el-table>
          </div>

        </div>
      </div>

      <div class="center-center">
        <div class="back_to_center_point">
          <img src="../../../assets/img/back_to_center_point.png" title="回到中心点"
               id="backToCenterPointIcon">
        </div>

        <div class="boat-code-show-status-switch-control">
          <img src="../../../assets/img/boat-code-show-status-switch-control-icon.png" title="显示或隐藏船只编号"
               id="boatCodeInfoShowStatusSwitchIcon">
        </div>
      </div>

      <div class="center-right">
        <!--船只信息区域-->
        <div class="boat-info">
          <!--标题-->
          <div class="boat-info-title">
            <div class="boat-info-title-icon">
              <img src="../../../assets/img/boat-info-icon.png" alt="">
            </div>
            <div class="boat-info-title-text">
              <span>船只信息</span>
            </div>
            <div class="boat-info-more-control">
              <img src="../../../assets/img/more-icon.png" style="margin-left: auto"
                   @click="showBoatDetailInfoListDialog" title="点击查看所有船只信息">
            </div>
          </div>

          <div class="boat-info-more-detail-info">
            <div class="operation-boat-count">
              运营数量 运行: <span>{{ operatingBoatNum }}</span> 空闲: <span>{{ idleBoatNum }}</span> 离线:
              <span>{{ offlineBoatNum }}</span>
            </div>
            <div class="alarm-count" style="margin-left: 25px">
              报警数量 紧急: <span>{{ urgencyAlarmNum }}</span> 警告: <span>{{ warnAlarmNum }}</span>
            </div>

          </div>

          <div class="boat-info-list">
            <ul class="boat-info-list-title">
              <li>编号</li>
              <li>航速</li>
              <li>电量</li>
              <li>时长</li>
              <li style="width: 15%">运营状态</li>
              <li style="width: 15%">报警状态</li>
              <li>详情</li>
            </ul>
            <div class="boat-info-list-content">
              <vue-seamless-scroll
                :data="boatStatusInfoArray"
                :class-option="scrollOption"
                class="seamless-warp"
              >
                <el-table
                  :data="boatStatusInfoArray"
                  :show-header="false"
                  :row-class-name="boatStatusInfoTableRowClassName"
                  :cell-style="boatStatusInfoTableCellstyle"
                  tooltip-effect="dark"
                  @row-click="handleBoatInfoTableRowClick"
                >
                  <el-table-column
                    prop="boatCode"
                    label="编号"
                    align="center"
                    width="70"
                    :show-overflow-tooltip="true"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="speed"
                    label="航速"
                    align="center"
                    width="75"
                    :show-overflow-tooltip="true"
                    :formatter="speedFormatter"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="power"
                    label="电量"
                    align="center"
                    width="60"
                    :show-overflow-tooltip="true"
                    :formatter="batteryPowerFormatter"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="onceDuration"
                    label="时长"
                    align="center"
                    width="75"
                    :show-overflow-tooltip="true"
                    :formatter="onceDurationFormatter"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="operationStatus"
                    label="运营状态"
                    align="center"
                    width="65"
                    :show-overflow-tooltip="true"
                    :formatter="operationStatusFormatter"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="alarmStatus"
                    label="报警状态"
                    align="center"
                    width="75"
                    :show-overflow-tooltip="true"
                    :formatter="alarmStatusFormatter"
                  >
                    <template slot-scope="scope">
                      <el-tag size="small" effect="dark"
                              :type="scope.row.alarmStatus === 0 ? 'success' : (scope.row.alarmStatus === 1?'warning':'danger')">
                        {{ scope.row.alarmStatus === 0 ? '正常' : (scope.row.alarmStatus === 1 ? '警告' : '紧急') }}
                      </el-tag>

                    </template>
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    align="center"
                    width="60"
                  >
                    <template slot-scope="scope">
                      <el-button
                        size="small"
                        type="text"
                        @click="handleElTagClicked(scope.$index,scope.row)"
                        style="font-size: 14px"
                      >进入
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </vue-seamless-scroll>
            </div>
            <!--            &lt;!&ndash;报警动态信息&ndash;&gt;-->
            <!--            <div class="boat-info-list-content" id="itemsBox" @focus="handleFocus" @blur="handleBlur"-->
            <!--                 @mouseenter="rollStop()" @mouseleave="rollStart(20)">-->
            <!--              <div id="parentItems" @click="handleBoatInfoListClickEvent($event)">-->
            <!--                <ul>-->
            <!--                  <li>A001</li>-->
            <!--                  <li>36KM/h</li>-->
            <!--                  <li>80%</li>-->
            <!--                  <li>36min</li>-->
            <!--                  <li style="width: 15%">运行</li>-->
            <!--                  <li style="width: 15%"><span class="alarm-status-green-dot"></span>正常</li>-->
            <!--                  <li>进入</li>-->
            <!--                </ul>-->
            <!--              </div>-->
            <!--              <div id="childItems" @click="handleBoatInfoListClickEvent($event)">-->

            <!--              </div>-->

            <!--            </div>-->
          </div>

        </div>

        <!--船只实时监控画面区-->
        <div class="boat-video">
          <!--船只信息列表标题区-->
          <div class="boat-video-title">
            <div class="boat-video-title-icon">
              <img src="../../../assets/img/boat-video-icon.png" alt="">
            </div>
            <div class="boat-video-title-text">
              <span>视频画面</span>
            </div>

          </div>

          <div class="boat-video-div">
            <!--            <video src="../../../assets/video/游艇视频.mp4" class="video-stream" autoplay loop muted>-->
            <!--            </video>-->
            <div class="video-container-parent" @mouseenter="handleVideoContainerMouseEnter"
                 @mouseleave="handleVideoContainerMouseLeave">
              <div id="video-container" class="video-container">
                <!--                <iframe-->
                <!--                  :src="currVideoUrl"-->
                <!--                  width="375"-->
                <!--                  height="250"-->
                <!--                  id="ysOpenDevice"-->
                <!--                  allowfullscreen-->
                <!--                >-->
                <!--                </iframe>-->
              </div>
              <div ref="videoMaskLayer" class="video-maskLayer">
                <img class="palyVideoImageButton" ref="palyVideoImageButton" src="/img/play-video-icon.png"
                     @click="startPlayVideo1">
                <img class="fullscreenImageButton" ref="fullscreenImageButton" src="/img/full-screen-icon.png"
                     @click="openFullscreen">
              </div>
            </div>
            <div class="video-cam-switch-div">
              <div class="video-boat-select-div">
                <select name="videoBoatSelect" id="videoBoatSelect" class="video-boat-select"
                        @change="handleVideoBoatSelectChange">
                  <option value="none" selected>无</option>
                  <option v-for="(boatCode,index) in boatCodeArray" :key="index" :value="boatCode">{{
                      boatCode
                    }}
                  </option>
                </select>
              </div>
              <div class="video-boat-switch-buttons-control">
                <div class="up-button">
                  <img v-if="cameraOrientation===1" src="../../../assets/img/boat-video-switch-up-button-selected.png"
                       class="switch-up-down-button-icon">
                  <img v-else src="../../../assets/img/boat-video-switch-up-button.png"
                       class="switch-up-down-button-icon" id="camera-up">
                </div>
                <div class="center">
                  <img v-if="cameraOrientation===4"
                       src="../../../assets/img/boat-video-switch-left-button-selected.png"
                       class="switch-left-right-button-icon">
                  <img v-else src="../../../assets/img/boat-video-switch-left-button.png"
                       class="switch-left-right-button-icon" id="camera-left">
                  <img v-if="cameraOrientation===5"
                       src="../../../assets/img/boat-video-switch-center-button-selected.png"
                       class="switch-boat-button-icon">
                  <img v-else src="../../../assets/img/boat-video-switch-center-button.png"
                       class="switch-boat-button-icon" id="camera-center">
                  <img v-if="cameraOrientation===2"
                       src="../../../assets/img/boat-video-switch-right-button-selected.png"
                       class="switch-left-right-button-icon">
                  <img v-else src="../../../assets/img/boat-video-switch-right-button.png"
                       class="switch-left-right-button-icon" id="camera-right">
                </div>
                <div class="down-button">
                  <img v-if="cameraOrientation===3"
                       src="../../../assets/img/boat-video-switch-down-button-selected.png"
                       class="switch-up-down-button-icon">
                  <img v-else src="../../../assets/img/boat-video-switch-down-button.png"
                       class="switch-up-down-button-icon" id="camera-down">
                </div>
                <div class="curr-orientation-text">
                  <span style="display:inline-block;color: white;margin-top: 15px;font-size: 12px;">(<span
                    id="currCameraOrientationText">中</span>)</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!--      <div class="video-play-div">-->
      <!--        <div class="video-play-container">-->

      <!--        </div>-->
      <!--      </div>-->
    </div>

    <!--展示船只详细信息列表的对话框-->
    <el-dialog
      title="船只信息列表"
      :visible.sync="dialogFormVisible"
      append-to-body
      destroy-on-close
      custom-class="boatDetailInfoListDialogClassName"
    >
      <div class="boatDetailInfoListDialogControl1">
        <span>全部灯光状态：</span>
        <el-switch
          v-model="allLightStatus"
          active-value="1"
          inactive-value="0"
          :width="32"
        ></el-switch>
      </div>
      <el-table
        :data="boatStatusInfoArray"
        height="700"
        :row-class-name="boatDetailInfoListTableRowClassName"
        :header-row-class-name="tableHeaderRowClassName"
        :header-cell-style="{
                 textAlign: 'center',
                 background: 'rgba(26,143,178,0.4)'
              }"
        :cell-style="tableCellstyle"
        :default-sort="{prop: 'time', order: 'ascending'}"
      >
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="50">
        </el-table-column>
        <el-table-column
          prop="boatIdentityId"
          label="船只出厂ID"
          align="center"
          width="150"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="boatCode"
          label="编号"
          align="center"
          width="60"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="speed"
          label="航速"
          align="center"
          width="80"
          :show-overflow-tooltip="true"
          :formatter="speedFormatter"
        >
        </el-table-column>
        <el-table-column
          prop="power"
          label="电池电量"
          align="center"
          width="80"
          :show-overflow-tooltip="true"
          :formatter="batteryPowerFormatter"
        >
        </el-table-column>
        <el-table-column
          prop="batteryTemperature"
          label="电池温度"
          align="center"
          width="80"
          :show-overflow-tooltip="true"
          :formatter="batteryTemperatureFormatter"
        >
        </el-table-column>
        <el-table-column
          prop="onceDuration"
          label="单次时长"
          align="center"
          width="80"
          :show-overflow-tooltip="true"
          :formatter="onceDurationFormatter"
        >
        </el-table-column>
        <el-table-column
          prop="aggregateDuration"
          label="累计时长"
          align="center"
          width="80"
          :show-overflow-tooltip="true"
          :formatter="aggregateDurationFormatter"
        >
        </el-table-column>
        <el-table-column
          prop="recorderCode"
          label="录像机编号"
          align="center"
          width="120"
          :show-overflow-tooltip="true"
          :formatter="recorderCodeFormatter"
        >
        </el-table-column>
        <el-table-column
          prop="todayIncome"
          label="今日收入(元)"
          align="center"
          width="100"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="accumulatedIncome"
          label="累计收入(元)"
          align="center"
          width="100"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="operationStatus"
          label="运营状态"
          align="center"
          width="80"
          :show-overflow-tooltip="true"
          :formatter="operationStatusFormatter"
        >
        </el-table-column>
        <el-table-column
          prop="alarmStatus"
          label="报警状态"
          align="center"
          width="80"
          :show-overflow-tooltip="true"
          :formatter="alarmStatusFormatter"
        >
        </el-table-column>
        <el-table-column
          label="灯光状态"
          align="center"
          width="80"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.lightStatus"
              active-value="1"
              inactive-value="0"
              :width="32"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleElTagClicked(scope.$index,scope.row)"
            >切换
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog
      ref="videoPlayDialog"
      title="视频播放"
      :visible.sync="videoPlayDialogVisible"
      append-to-body
      destroy-on-close
      custom-class="videoPlayDialogClassName"
      @close="handleVideoPlayDialogClose"
    >
      <div slot="title" class="dialog-title">
        <span class="title-text">监控视频<span style="font-size: 12px"> (船只编号：{{
            selectedBoatCodeForVideo
          }}, 通道：{{ selectedChannelText }})</span></span>
      </div>
      <div ref="videoPlayingContainer" id="videoPlayingContainer" class="videoPlayingContainer">
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";
import * as zjw_theme1 from '@/assets/echars_theme/zjw_theme1'
import {closeSocket} from '@/utils/websocket'
import {getScenic} from "@/api/system/scenic"
import {getBoatListByScenicId} from "@/api/system/boat"
import {selectScenicOperationDynamicInfoList} from "@/api/system/scenicOperationDynamicInfo"
import {selectScenicAlarmInfoList, updateScenicAlarmInfo} from "@/api/system/alarm"
import {getAccumulatedTotalIncome, getAllDailyIncomeList} from "@/api/system/income"
import store from '@/store'

import moment from "moment";

import CountTo from 'vue-count-to'

//引入坐标转换库
import {bd09towgs84, wgs84tobd09} from "@/utils/gps"

//引入消息发布与订阅框架工具pubsub-js
import pubsub from 'pubsub-js'

// 引入数据列表循环滚动组件
import vueSeamlessScroll from 'vue-seamless-scroll'
import axios from "axios";

//引入萤石云ezopen JS SDK
import EZUIKit from "ezuikit-js";

import {playAudio} from "@/utils/tts"
import {listShipline} from "@/api/system/shipline";

export default {
  name: "BoatMonitor",
  components: {
    vueSeamlessScroll,
    CountTo
  },
  data() {
    return {
      isRouterEnter: false,//当前监控中心界面是否是通过路由进入的
      scenic: {
        scenicShortName: '***'
      }, //当前景区
      wharfItemArr: [], //码头对象数组
      fenceItemArr: [], //电子围栏对象数组
      shiplineItemArr: [], //自动航线对象数组
      headerTitleFontSize: 38, //header区中间的标题文字大小
      map: undefined, //百度地图对象
      centerPointArr: [], //组合获取地图中心点的点数组
      centerPoint: undefined, //地图中心点
      data_info: [], //地图marker数据
      curZoom: 16, //地图当前的缩放级别
      boatInfoMap: new Map(), //船只信息map集合
      /**
       * 船只编号boatCode与船只惯导信息navigationInfo集合。
       */
      // boatIdentityIdAndLocationInfoMap: new Map(), //船只出厂id与船只位置信息对象LocationInfo一一映射的map集合
      boatIdentityIdAndBoatMarkerMap: new Map(), //船只出厂id与船只marker对象一一映射的map集合
      boatIdentityIdAndBoatStatusInfoMap: new Map(), //船只出厂id与船只状态信息对象BoatLocationInfo一一映射的map集合
      iconSize: 24,
      labelOffsetX: 0,
      labelOffsetY: -32,
      labelFontSize: 10,
      boatIcon: { //船只小图标对象
        greenBoatIcon: new BMapGL.Icon("/img/boat-green.png", new BMapGL.Size(28, 28)),
        yellowBoatIcon: new BMapGL.Icon("/img/boat-yellow.png", new BMapGL.Size(28, 28)),
        redBoatIcon: new BMapGL.Icon("/img/boat-red.png", new BMapGL.Size(28, 28)),
      },
      boatStatus: {
        idle: 'idle',
        running: 'running',
        warn: 'warn',
        alarm: 'alarm'
      },
      moneyAmountValueShow: true, //实时累计金额数值是否显示
      timer: null, //船只信息列表滚动计时器
      cameraOrientation: 0, //当前显示的船上摄像头的编号，可取值：1,2,3,4,5，此处注意默认值需先设置为0，否则会有问题
      boatMarkerLabelShow: true,
      isHistoryMoneyExpand: false, //是否展开往期金额查看图表
      historyMoneyData: undefined,//全部的往期金额数据
      currDiagramLevel: 2,//当前的图表显示时间单位。0表示年，1表示月，2表示日。默认显示日，即值为2.
      currDiagramData: [], //当前的图表数据
      currDiagramDataIndex: 0, //当前图表进度条显示的index。
      currProgressValue: 100, //图表进度条当前值。

      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      year: "",
      month: "",
      date: "",
      day: "",
      currTime: "", //当前时间
      timeInterval: undefined,
      alarmStatusTabsActiveName: 'first',
      operationStatusTabsActiveName: 'first',
      // latestAlarmData: [
      //   {
      //     type: "1", //报警类型。0：普通(灰色)，1：警告(黄色)，2：紧急(红色)
      //     time: "/5/6 03:10",
      //     boatCode: "P001",
      //     content: "电机报警",
      //     contact: "18707180001",
      //     status: "0" //状态。0：未处理，1：已处理，2：未知
      //   }
      // ],
      latestAlarmData: [
        {
          type: "1", //报警类型。0：普通(灰色)，1：警告(黄色)，2：紧急(红色)
          time: "/5/6 03:10",
          boatCode: "P001",
          content: "电机报警",
          contact: "18707180001",
          status: "0" //状态。0：未处理，1：已处理，2：未知
        },
        {
          type: "2",
          time: "/5/6 03:11",
          boatCode: "P002",
          content: "电子围栏",
          contact: "18707180001",
          status: "1"
        },
        {
          type: "2",
          time: "/5/6 03:12",
          boatCode: "P003",
          content: "通信中断",
          contact: "18707180001",
          status: "0"
        },
        {
          type: "1",
          time: "/5/6 03:13",
          boatCode: "P004",
          content: "电机报警",
          contact: "18707180001",
          status: "0"
        },
        {
          type: "1",
          time: "/5/6 03:14",
          boatCode: "P005",
          content: "电机报警",
          contact: "18707180001",
          status: "0"
        }
      ],
      historyAlarmData: [],
      todayAllOperationData: [],
      selectedHistoryDateForOperationDynamicInfo: "",
      selectedDateForHistoryAlarmInfoList: "",
      alarmStatusOptions: [
        {
          value: 0,
          label: '未处理'
        },
        {
          value: 2,
          label: '已处理'
        },
        {
          value: 1,
          label: '已消除' //特意将'已消除'选项放在最后面
        }
      ],
      alarmStatusValue: '',
      isAlarmStatusEditing: false,
      isHistoryAlarmStatusEditing: false,
      currEditingIndex: 0,
      currEditingHistoryAlarmInfoIndex: 0,
      selectedHistoryDate: "",
      selectedHistoryDateForm: "",
      boatStatusInfoArray: [],
      allLightStatus: "0",//所有的灯光的统一状态。“0”:全部已关闭,"1":全部已开启
      scrollOption: {
        step: 0.8, // 数值越大速度滚动越快
        limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
        // limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      },
      updatingBoatLocationInfo: false, //当前是否正在更新船只位置信息
      updatingBoatStatusInfo: false, //当前是否正在更新船只状态信息
      boatCodeArray: [], //船只编号数组
      selectedBoatCodeForVideo: undefined, //当前选中的观看摄像头的船只编号
      selectedBoatStatusInfoForVideo: undefined, //当前选中的观看摄像头的船只状态信息对象
      selectedChannelNo: undefined, //当前选中的摄像头的通道号
      selectedRecorderCode: undefined, //当前选中的船只对应的录像机编号
      selectedChannelText: "", //当前选中的摄像头通道名称
      currVideoUrl: "", //当前摄像头的萤石云url
      todayAllOperationDynamicInfoArr: [], //今日所有的景区运营动态信息集合
      assignedDayAllOperationDynamicInfoArr: [], //指定日期的所有景区运营动态信息集合
      assignedDayAllAlarmInfoArr: [], //指定日期的所有景区报警信息集合
      accumulatedTotalIncome: 0, //景区历史累计总收入
      accumulatedTotalIncomeStartVal: 0, //景区历史累计总收入金额动画开始值
      accumulatedTotalIncomeEndVal: 0, //景区历史累计总收入金额动画结束值
      todayAllAlarmInfoArr: [], //今日所有的报警信息集合
      locationInfo: {
        city: "武汉市",
        cityCode: "110000",
        lon: 114.427816,
        lat: 30.520742
      }, //当前位置信息
      weatherInfo: {
        city: "武汉市",
        minTemp: 17,
        maxTemp: 25,
        weather: "小雨-中雨",
        wind: "3"
      }, //当前天气信息
      myGaodeApikey: "01a11339337dc2b42903595f2ab60a76", //自己的高德api key
      yingshiyunAccessToken: "", //萤石云AccessToken
      ezopenOptions: {}, //萤石云播放器配置参数对象
      yingshiyunPlayer1: undefined,//萤石云播放器对象1
      yingshiyunPlayer2: undefined,//萤石云播放器对象2
      videoPlayDialogVisible: false, //播放视频的对话框是否显示
      videoPlayDialogWidth: "80%",
      processingScenicBoatAlarmInfo: undefined, //当前正在处理中的船只报警信息对象
    }
  },
  mounted() {
    let scenicId = this.$route.query && this.$route.query.scenicId;
    if (scenicId) { //此时监控后台是通过路由跳转的方式进入的(比如在无疆后台点击各景区图标进入)
      this.isRouterEnter = true;
    } else { //此时监控后台不是通过路由跳转的方式进入的，是有景区管理人员通过账号密码登录进入的
      this.isRouterEnter = false;
      scenicId = store.getters.scenicId;
    }

    console.log("mounted scenicId: ", scenicId)

    //获取萤石云accessToken。
    this.getYingshiyunAccessToken();

    scenicId && this.getScenicInfo(scenicId);

    this.timeInterval = setInterval(() => {
      this.getCurrTime();
    }, 1000);
  },
  computed: {
    /**
     * 今日最新的5条景区运营动态信息集合
     */
    lastOperationDynamicInfoArr() {
      if (this.todayAllOperationDynamicInfoArr.length <= 5) {
        return this.todayAllOperationDynamicInfoArr;
      } else {
        return this.todayAllOperationDynamicInfoArr.slice(0, 5);
      }
    },
    /**
     * 今日最新的5条景区报警信息集合
     */
    lastAlarmInfoArr() {
      if (this.todayAllAlarmInfoArr.length <= 5) {
        return this.todayAllAlarmInfoArr;
      } else {
        return this.todayAllAlarmInfoArr.slice(0, 5);
      }
    },
    //当前处于运行状态(含自动驾驶和手动驾驶两种状态)的船只数量。
    operatingBoatNum() {
      let newArr = this.boatStatusInfoArray.filter(item => item.operationStatus === 3 || item.operationStatus === 4);
      return newArr.length;
    },
    //当前处于空闲状态的船只数量。
    idleBoatNum() {
      let newArr = this.boatStatusInfoArray.filter(item => item.operationStatus === 2);
      return newArr.length;
    },
    //当前处于离线状态的船只数量。
    offlineBoatNum() {
      let newArr = this.boatStatusInfoArray.filter(item => item.operationStatus === 0);
      return newArr.length;
    },
    //当前处于警告级别的报警数量。
    warnAlarmNum() {
      let newArr = this.todayAllAlarmInfoArr.filter(item => item.level === 1);
      return newArr.length;
    },
    //当前处于紧急级别的报警数量。
    urgencyAlarmNum() {
      let newArr = this.todayAllAlarmInfoArr.filter(item => item.level === 2);
      return newArr.length;
    },
  },
  watch: {
    selectedHistoryDateForOperationDynamicInfo(newVal, oldVal) {
      this.getAssignedDayAllOperationDynamicInfo(newVal);
    },
    selectedDateForHistoryAlarmInfoList(newVal, oldVal) {
      this.getAssignedDayAllAlarmInfo(newVal);
    }
  },
  beforeDestroy() {
    clearInterval(this.timeInterval);

    //取消消息订阅
    pubsub.unsubscribe(this.pubId);
  },
  methods: {
    getScenicInfo(scenicId) {
      getScenic(scenicId).then(res => {
        console.log("getScenicInfo res= ", res)
        this.scenic = res.data;

        //对地图等进行初始化
        this.init();

        //获取历史累计收入总和
        getAccumulatedTotalIncome(scenicId).then(res => {
          console.log("getAccumulatedTotalIncome res: ", res)
          // this.accumulatedTotalIncome = res.accumulatedTotalIncome;
          this.accumulatedTotalIncomeEndVal = res.accumulatedTotalIncome;
        })

        //获取指定景区所有的日常收入明细对象列表。
        getAllDailyIncomeList({
          scenicId
        }).then(res => {
          console.log("getAllDailyIncomeList res= ", res);
          this.historyMoneyData = res.data;

          this.currDiagramData = this.generateCurrDiagramData(this.currDiagramLevel);
          // console.log("this.currDiagramData= ", this.currDiagramData)

          //初始化往期金额图表
          this.currDiagramDataIndex = this.currDiagramData.length - 1;
          this.createHistoryMoneyDiagram(this.currDiagramData[this.currDiagramDataIndex]);

          this.updateProgressValue();
        })

        //获取今日所有的景区运营动态信息数据集合。
        this.getTodayAllOperationDynamicInfo();

        //获取景区今日所有的船只报警信息数据集合。
        this.getTodayAllAlarmInfo();


      }).catch(error => {
        console.log("getScenicInfo error: ", error)
      })
    },

    /**
     * 根据景区id查询自动航线列表。
     */
    getShipLineList(scenicId) {
      return new Promise((resolve, reject) => {
        listShipline({
          scenicId
        }).then(res => {
          // console.log("listShipline res.data: ", res.data);
          let shipLineList = res.data;

          this.shiplineItemArr = [];
          if (shipLineList && shipLineList.length > 0) {

            let labelStyle = {
              border: "1px solid rgb(204, 204, 204)",
              color: "rgb(0, 0, 0)",
              borderRadius: "5px",
              padding: "1px",
              background: "rgba(252,249,249,0.89)",
              // fontSize: this.labelFontSize + "px",
              fontSize: 12 + "px",
              fontWeight: 400
            }

            for (let i = 0; i < shipLineList.length; i++) {
              let shipline = shipLineList[i];
              let coordinates = shipline.coordinates;
              let dotArr = coordinates.split(",");
              let shiplineItem = {};
              Object.assign(shiplineItem, shipline);

              shiplineItem.shiplineName = "自动航线" + (i + 1);

              shiplineItem.coordinates = []; //用于存储自动航线的真实坐标的数组
              shiplineItem.bdCoordinates = []; //用于存储自动航线的百度坐标的数组
              let currShiplineTranslatedPointArr = [];
              //遍历坐标点
              for (let j = 0; j < dotArr.length / 2; j++) {
                let lat = Number(dotArr[2 * j]); //纬度
                let lng = Number(dotArr[2 * j + 1]); //经度

                //注意，此处需确保纬度在前，经度在后
                shiplineItem.coordinates.push(lat);
                shiplineItem.coordinates.push(lng);
                let translatedPoint = wgs84tobd09(lng, lat);

                //注意，此处需确保纬度在前，经度在后
                shiplineItem.bdCoordinates.push(translatedPoint[1]);
                shiplineItem.bdCoordinates.push(translatedPoint[0]);

                let point = new BMapGL.Point(translatedPoint[0], translatedPoint[1]);

                if (j === 0) { //当前坐标为此自动航线的起点
                  shiplineItem.startPointLabel = new BMapGL.Label("起点", { // 创建文本标注
                    position: point, // 设置标注的地理位置
                    offset: new BMapGL.Size(-10, 5) // 设置标注的偏移量
                  })
                  shiplineItem.startPointLabel.setStyle(labelStyle);
                }

                if (j === dotArr.length / 2 - 1) { //当前坐标为此自动航线的终点
                  shiplineItem.endPointLabel = new BMapGL.Label("终点", { // 创建文本标注
                    position: point, // 设置标注的地理位置
                    offset: new BMapGL.Size(-10, 5) // 设置标注的偏移量
                  })
                  shiplineItem.endPointLabel.setStyle(labelStyle);
                }

                //注意，此处需确保经度在前，纬度在后
                currShiplineTranslatedPointArr.push(point);

                this.centerPointArr.push(point);
              }

              //创建(但暂不添加)电子围栏多边形覆盖物
              let shiplinePolyline = new BMapGL.Polyline(currShiplineTranslatedPointArr, {
                strokeStyle: 'dashed',
                // strokeColor: "yellow",
                strokeColor: "white",
                strokeWeight: 2,
                strokeOpacity: 0.5
              });
              shiplineItem.overlay = shiplinePolyline;

              this.shiplineItemArr.push(shiplineItem);
            }
          }

          resolve();
        }).catch(err => {
          reject();
        }).finally(() => {
        });
      })
    },

    /**
     * 将所有自动航线覆盖物添加到地图上。
     */
    addAllShiplineOverlay() {
      if (this.shiplineItemArr && this.shiplineItemArr.length > 0) {
        for (let i = 0; i < this.shiplineItemArr.length; i++) {
          let shiplineItem = this.shiplineItemArr[i];
          if (this.map) {
            if (shiplineItem.overlay) {
              this.map.addOverlay(shiplineItem.overlay);
            }

            if (shiplineItem.startPointLabel) {
              this.map.addOverlay(shiplineItem.startPointLabel)
            }
            if (shiplineItem.endPointLabel) {
              this.map.addOverlay(shiplineItem.endPointLabel)
            }
          }
        }
      }
    },

    /**
     *获取萤石云accessToken。
     */
    getYingshiyunAccessToken() {
      this.getConfigKey("yingshiyun.accessToken").then(response => {
        // console.log("getYingshiyunAccessToken response: ", response);
        this.yingshiyunAccessToken = response.msg;
      });
    },
    /**
     * 根据船只出厂ID获取对应的船只状态信息。
     */
    getBoatStatusInfoByIdentityId(identityId) {
      let targetBoatStatusInfo = null;
      for (let i = 0; i < this.boatStatusInfoArray.length; i++) {
        if (this.boatStatusInfoArray[i].boatIdentityId === identityId) {
          targetBoatStatusInfo = this.boatStatusInfoArray[i];
          break;
        }
      }

      return targetBoatStatusInfo;
    },

    /**
     * 根据船只编号获取对应的船只状态信息。如果有编号相同的船只默认获取第一个船只的状态信息。
     */
    getBoatStatusInfoByBoatCode(boatCode) {
      let targetBoatStatusInfo = null;
      for (let i = 0; i < this.boatStatusInfoArray.length; i++) {
        if (this.boatStatusInfoArray[i].boatCode === boatCode) {
          targetBoatStatusInfo = this.boatStatusInfoArray[i];
          break;
        }
      }

      return targetBoatStatusInfo;
    },

    processBoatRealtimeStatusInfoUpdate(msgName, boatRealtimeStatusInfo) {
      if (!boatRealtimeStatusInfo) return;

      //需先判断地图是否已创建并是否已经过centerAndZoom进行初始化
      if (!this.map || !this.map.isLoaded()) return;

      console.log('接收到船只实时状态信息', msgName, boatRealtimeStatusInfo);

      //船只身份识别码(出厂id)
      let boatIdentityId = boatRealtimeStatusInfo.sysBoat.boatIdentityId;

      //船只编号
      // let boatCode = boatRealtimeStatusInfo.sysBoat.boatCode;
      //船只状态
      let status = boatRealtimeStatusInfo.sysBoat.status;
      //录像机编号
      let recorderCode = boatRealtimeStatusInfo.sysBoat.recorderCode;

      if (boatIdentityId) {
        let boatStatusInfo = this.getBoatStatusInfoByIdentityId(boatIdentityId);
        if (boatStatusInfo) {
          boatStatusInfo.lon = boatRealtimeStatusInfo.lon;
          boatStatusInfo.lat = boatRealtimeStatusInfo.lat;
          boatStatusInfo.orientation = boatRealtimeStatusInfo.orientation;
          boatStatusInfo.speed = boatRealtimeStatusInfo.speed;
          boatStatusInfo.onceDuration = boatRealtimeStatusInfo.onceDuration;
          boatStatusInfo.aggregateDuration = boatRealtimeStatusInfo.aggregateDuration;
          boatStatusInfo.recorderCode = recorderCode;

          //更新船只状态信息
          let newOperationStatus = this.translateBoatStatusToOperationStatus(status);
          let oldOperationStatus = boatStatusInfo.operationStatus;
          let isOperationStatusChanged = false;
          if (newOperationStatus !== oldOperationStatus) isOperationStatusChanged = true;
          boatStatusInfo.operationStatus = newOperationStatus;
          //船只运营状态发生变化，更新排船只信息排序。
          if (isOperationStatusChanged) this.rearrangeForBoatStatusInfoArray();

          //更新船只位置信息
          this.updateBoatLocationInfo(boatStatusInfo);
        }
      }

    },

    /**
     * 对船只状态信息数组进行重新排序。
     * 船只运营状态可取值：0=离线,1=维护,2=空闲,3=手动驾驶,4=自动驾驶。
     */
    rearrangeForBoatStatusInfoArray() {
      console.log("对船只状态信息数组进行重新排序!")
      //对this.boatStatusInfoArray进行重排序，将空闲，自动驾驶，手动驾驶状态的船只排在前面，其他状态的船只排在后面
      //自动或手动驾驶状态的船只数组
      let manualOrAutoDrivingBoatArr = this.boatStatusInfoArray.filter(boatStatusInfo => boatStatusInfo.operationStatus === 3 || boatStatusInfo.operationStatus === 4);
      //空闲状态的船只数组
      let idleBoatArr = this.boatStatusInfoArray.filter(boatStatusInfo => boatStatusInfo.operationStatus === 2);
      //维护状态的船只数组
      let maintainingBoatArr = this.boatStatusInfoArray.filter(boatStatusInfo => boatStatusInfo.operationStatus === 1);
      //离线状态的船只数组
      let offlineBoatArr = this.boatStatusInfoArray.filter(boatStatusInfo => boatStatusInfo.operationStatus === 0);
      // console.log("idleBoatArr: ", idleBoatArr)
      // console.log("notIdleBoatArr: ", notIdleBoatArr)
      this.boatStatusInfoArray = manualOrAutoDrivingBoatArr.concat(idleBoatArr, maintainingBoatArr, offlineBoatArr);
      // console.log("this.boatStatusInfoArray: ", this.boatStatusInfoArray)
    },

    /**
     * 更新景区运营动态信息。
     */
    processScenicOperationDynamicInfoUpdate(msgName, scenicOperationDynamicInfo) {
      // console.log("processScenicOperationDynamicInfoUpdate: ", msgName, scenicOperationDynamicInfo);
      this.todayAllOperationDynamicInfoArr.unshift(scenicOperationDynamicInfo);
    },
    processScenicAccumulatedTotalIncomeUpdate(msgName, scenicOperationDynamicInfo) {
      console.log("processScenicAccumulatedTotalIncomeUpdate: ", msgName, scenicOperationDynamicInfo);
      if (!scenicOperationDynamicInfo) return
      // this.accumulatedTotalIncome = scenicOperationDynamicInfo.accumulatedTotalIncome;

      this.accumulatedTotalIncomeStartVal = this.accumulatedTotalIncomeEndVal;
      this.accumulatedTotalIncomeEndVal = scenicOperationDynamicInfo.accumulatedTotalIncome;
    },
    /**
     * 处理景区船只报警信息更新。
     * @param msgName
     * @param scenicBoatAlarmInfo
     */
    processScenicBoatAlarmInfoUpdate(msgName, scenicBoatAlarmInfo) {
      console.log("processScenicBoatAlarmInfoUpdate: ", msgName, scenicBoatAlarmInfo);

      if (!scenicBoatAlarmInfo) return

      if (this.processingScenicBoatAlarmInfo && _.isEqual(this.processingScenicBoatAlarmInfo, scenicBoatAlarmInfo)) {
        console.log("processScenicBoatAlarmInfoUpdate 新接收到的船只报警信息对象与当前正在处理的报警信息对象完全相同，无需重复处理！")
        return;
      }

      this.processingScenicBoatAlarmInfo = scenicBoatAlarmInfo;
      //获取当前报警对应的船只出厂id
      let boatIdentityId = scenicBoatAlarmInfo.boatIdentityId;
      //获取报警级别。0：普通，1：警告，2：紧急。
      let level = scenicBoatAlarmInfo.level;
      this.updateBoatAlarmStatus(boatIdentityId, level);

      //获取报警类型。0：电子围栏报警，1：紧急急停，2：电机报警，3：电池低电量报警，4：电池温度高报警
      let type = scenicBoatAlarmInfo.type;

      let phone = scenicBoatAlarmInfo.phone;
      if (!phone) {
        scenicBoatAlarmInfo.phone = "无";
      }
      console.log("phone: ", phone)

      if (type === 0) { //电子围栏报警。电子围栏报警只需文字提示即可，无需弹窗+语音的强提醒。
        //获取报警处理状态。0：未处理，1：已消除。2，已处理
        let status = scenicBoatAlarmInfo.status;
        if (status && status === 1) { //当前接收到的是电子围栏报警状态已自动解除的信息
          //重新获取今日所有报警状态信息
          this.getTodayAllOperationDynamicInfo();
        } else {
          this.todayAllAlarmInfoArr.unshift(scenicBoatAlarmInfo);
        }
      } else { //其它类型报警
        this.todayAllAlarmInfoArr.unshift(scenicBoatAlarmInfo);

        //获取报警状态。0：未处理，1：已消除。2，已处理
        let status = scenicBoatAlarmInfo.status;

        if (status === 0 && level === 2) { //只有报警级别为紧急，且报警状态为未处理的报警才需要进行弹窗与语音强提醒。
          let boatCode = scenicBoatAlarmInfo.boatCode;

          let text;
          if (type === 1) { //紧急急停报警
            if (phone) {
              text = `游船${boatCode}发出急停报警信息，请立即处理！游客联系电话:${phone}`;
            } else {
              text = `游船${boatCode}发出急停报警信息，请立即处理！`;
            }
          } else if (type === 2) { //电机报警

          } else if (type === 3) { //电池低电量报警
            if (phone) {
              text = `游船${boatCode}电量低，请及时充电！游客联系电话:${phone}`;
            } else {
              text = `游船${boatCode}电量低，请及时充电！`;
            }
          } else if (type === 4) { //电池温度高报警
            if (phone) {
              text = `游船${boatCode}电池温度高，请及时处理！游客联系电话:${phone}`;
            } else {
              text = `游船${boatCode}电池温度高，请及时处理！`;
            }
          } else if (type === 5) { //方向机离线报警
            if (phone) {
              text = `游船${boatCode}方向机掉线，请及时处理！游客联系电话:${phone}`;
            } else {
              text = `游船${boatCode}方向机掉线，请及时处理！`;
            }
          } else if (type === 6) { //油门手柄离线报警
            if (phone) {
              text = `游船${boatCode}油门手柄掉线，请及时处理！游客联系电话:${phone}`;
            } else {
              text = `游船${boatCode}油门手柄掉线，请及时处理！`;
            }
          } else if (type === 7) { //惯导掉线报警
            if (phone) {
              text = `游船${boatCode}惯导掉线，请及时处理！游客联系电话:${phone}`;
            } else {
              text = `游船${boatCode}惯导掉线，请及时处理！`;
            }
          } else if (type === 8) { //毫米波掉线报警
            if (phone) {
              text = `游船${boatCode}毫米波掉线，请及时处理！游客联系电话:${phone}`;
            } else {
              text = `游船${boatCode}毫米波掉线，请及时处理！`;
            }
          } else if (type === 9) { //电机0掉线报警
            if (phone) {
              text = `游船${boatCode}电机0掉线，请及时处理！游客联系电话:${phone}`;
            } else {
              text = `游船${boatCode}电机0掉线，请及时处理！`;
            }
          } else if (type === 10) { //电机1掉线报警
            if (phone) {
              text = `游船${boatCode}电机1掉线，请及时处理！游客联系电话:${phone}`;
            } else {
              text = `游船${boatCode}电机1掉线，请及时处理！`;
            }
          } else if (type === 11) { //电池掉线报警
            if (phone) {
              text = `游船${boatCode}电池掉线，请及时处理！游客联系电话:${phone}`;
            } else {
              text = `游船${boatCode}电池掉线，请及时处理！`;
            }
          } else if (type === 12) { //机械执行器0掉线报警
            if (phone) {
              text = `游船${boatCode}机械执行器0掉线，请及时处理！游客联系电话:${phone}`;
            } else {
              text = `游船${boatCode}机械执行器0掉线，请及时处理！`;
            }
          } else if (type === 13) { //机械执行器1掉线报警
            if (phone) {
              text = `游船${boatCode}机械执行器1掉线，请及时处理！游客联系电话:${phone}`;
            } else {
              text = `游船${boatCode}机械执行器1掉线，请及时处理！`;
            }
          }

          console.log("processScenicBoatAlarmInfoUpdate 触发弹窗报警提示, text: ", text)
          let notify = this.$notify({
            title: '报警信息',
            type: 'warning',
            message: text,
            position: 'top-left',
            offset: 300,
            // duration: 10000
            duration: 0 //设为0则不会自动关闭，必须手动关闭
          });

          //取消点击esc等按键关闭通知的按键事件
          document.removeEventListener('keydown', notify.keydown);

          // handleSpeakWithBaiduTts(text);
          playAudio(text);
        }
      }
    },
    /**
     * 更新船只的报警状态。
     * @param boatIdentityId
     * @param alarmLevel 报警级别。0：普通，1：警告，2：紧急。
     */
    updateBoatAlarmStatus(boatIdentityId, alarmLevel) {
      let boatStatusInfo = this.getBoatStatusInfoByIdentityId(boatIdentityId);
      if (boatStatusInfo) {
        boatStatusInfo.alarmStatus = alarmLevel;
      }
    },
    processBoatBatteryStatusInfoUpdate(msgName, boatBatteryStatusInfo) {
      if (!boatBatteryStatusInfo) return;

      //需先判断地图是否已创建并是否已经过centerAndZoom进行初始化
      if (!this.map || !this.map.isLoaded()) return;

      console.log('接收到船只电池状态信息', msgName, boatBatteryStatusInfo);

      let boatIdentityId = boatBatteryStatusInfo.sysBoat.boatIdentityId;
      let boatCode = boatBatteryStatusInfo.sysBoat.boatCode;

      if (boatIdentityId) {
        let boatStatusInfo = this.getBoatStatusInfoByIdentityId(boatIdentityId);
        if (boatStatusInfo) {
          boatStatusInfo.power = boatBatteryStatusInfo.soc; //电池剩余电量百分比
          boatStatusInfo.batteryTemperature = boatBatteryStatusInfo.maximumTemperature; //电池当前温度
        }
      }
    },

    /**
     * 处理船只运营状态更新消息。该方法通常在船只刚上线或离线时调用。
     * @param msgName
     * @param boatOperationStatusInfo
     */
    processBoatOperationStatusInfoUpdate(msgName, boatOperationStatusInfo) {
      if (!boatOperationStatusInfo) return;

      //需先判断地图是否已创建并是否已经过centerAndZoom进行初始化
      if (!this.map || !this.map.isLoaded()) return;

      console.log('接收到船只运营状态被更新的消息', msgName, boatOperationStatusInfo);

      let boatIdentityId = boatOperationStatusInfo.boatIdentityId;
      // let boatCode = boatOperationStatusInfo.boatCode;

      if (boatIdentityId) {
        let boatStatusInfo = this.getBoatStatusInfoByIdentityId(boatIdentityId);
        if (boatStatusInfo) {
          boatStatusInfo.operationStatus = this.translateBoatStatusToOperationStatus(boatOperationStatusInfo.status);

          //对船只状态信息数组进行重新排序。
          this.rearrangeForBoatStatusInfoArray();
        }
      }
    },

    /**
     * 更新船只位置信息。
     */
    updateBoatLocationInfo(boatStatusInfo) {

      //在地图上创建船只图标marker
      this.createBoatMarker(boatStatusInfo);
    },
    /**
     * 获取今日所有的景区运营动态信息数据集合。
     */
    getTodayAllOperationDynamicInfo() {
      if (!this.scenic) return

      let query = {
        scenicId: this.scenic.scenicId,
        createTime: moment().format("YYYY-MM-DD HH:mm:ss")
      }
      selectScenicOperationDynamicInfoList(query).then(res => {
        // console.log("getTodayAllOperationDynamicInfo res: ", res)
        this.todayAllOperationDynamicInfoArr = res.data;
      })
    },

    /**
     * 获取景区今日所有的运营动态信息数据集合。
     */
    getTodayAllAlarmInfo() {
      if (!this.scenic) return

      let query = {
        scenicId: this.scenic.scenicId,
        createTime: moment().format("YYYY-MM-DD HH:mm:ss")
      }
      selectScenicAlarmInfoList(query).then(res => {
        console.log("getTodayAllAlarmInfo res: ", res)
        this.todayAllAlarmInfoArr = res.data;
      })
    },

    /**
     * 获取指定日期的景区运营动态信息数据集合。
     * @param date 字符串格式的日期，示例：'2023.9.13'
     */
    getAssignedDayAllOperationDynamicInfo(date) {
      if (!this.scenic || !date) return

      let query = {
        scenicId: this.scenic.scenicId,
        createTime: moment(date).format("YYYY-MM-DD HH:mm:ss")
      }
      selectScenicOperationDynamicInfoList(query).then(res => {
        // console.log("getAssignedDayAllOperationDynamicInfo res: ", res)
        this.assignedDayAllOperationDynamicInfoArr = res.data;
      })
    },
    /**
     * 获取指定日期的景区运营动态信息数据集合。
     * @param date 字符串格式的日期，示例：'2023.9.13'
     */
    getAssignedDayAllAlarmInfo(date) {
      if (!this.scenic || !date) return

      let query = {
        scenicId: this.scenic.scenicId,
        createTime: moment(date).format("YYYY-MM-DD HH:mm:ss")
      }
      selectScenicAlarmInfoList(query).then(res => {
        // console.log("getAssignedDayAllOperationDynamicInfo res: ", res)
        this.assignedDayAllAlarmInfoArr = res.data;
      })
    },
    /**
     * 将船只状态转换成运营状态。
     * @param boatStatus 船只状态。可能存在的值：0=离线,1=维护,2=空闲,3=支付倒计时中,4=拼团中,5=上船倒计时中,6=开锁等待中,7=手动驾驶中,8=自动驾驶中。
     * @return 返回运营状态。运营状态可能存在的值：0=离线,1=维护,2=空闲,3=手动驾驶,4=自动驾驶。
     */
    translateBoatStatusToOperationStatus(boatStatus) {
      //运营状态。0=离线,1=维护,2=空闲,3=手动驾驶,4=自动驾驶。
      let operationStatus = 0;

      if (boatStatus === 0 || boatStatus === 1) {
        operationStatus = boatStatus;
      } else if (boatStatus === 2 || boatStatus === 3 || boatStatus === 4 || boatStatus === 5 || boatStatus === 6) {
        //运营状态中的空闲状态(2)包含船只状态中的如下状态：2=空闲,3=支付倒计时中,4=拼团中,5=上船倒计时中,6=开锁等待中
        operationStatus = 2;
      } else if (boatStatus === 7) {
        operationStatus = 3;
      } else if (boatStatus === 8) {
        operationStatus = 4;
      }

      return operationStatus;
    },
    /**
     * 初始化往期金额图表。
     */
    createHistoryMoneyDiagram(diagramData) {
      // var myChart = echarts.init(this.$refs.historyMoneyDiagram, "dark");
      var myChart = echarts.init(this.$refs.historyMoneyDiagram, "zjw_theme1");
      var option = {
        title: [
          {
            subtext: diagramData.subTitle, //副标题
            right: '35px',
            top: '10px',
            subtextStyle: {
              color: '#e8e8e8',
              fontWeight: 'normal',
              fontFamily: 'sans-serif',
              fontSize: '14px'
            },
          },
          {
            text: diagramData.mainTitle, //主标题
            left: 'center',
            textStyle: {
              color: '#fcf9f9',
              fontWeight: 'normal',
              fontFamily: 'sans-serif',
              fontSize: '20px'
            },
          }
        ],
        tooltip: {
          show: true, //是否显示提示框组件。包括提示框浮层和 axisPointer。
          //鼠标触摸显示值
          trigger: "axis", //触发类型。
          axisPointer: { //坐标轴指示器配置项。
            type: 'line' //指示器类型。
          }
        },
        xAxis: {
          type: 'category', //坐标轴类型。'category'类目轴，适用于离散的类目数据。为该类型时类目数据可自动从series.data或dataset.source中取，或者可通过xAxis.data设置类目数据。
          name: '时间', //坐标轴名称。
          data: diagramData.xData
        },
        yAxis: {
          type: 'value',
          name: '元', //坐标轴名称。
        },
        series: [
          {
            name: '金额', //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
            data: diagramData.yData,
            type: 'line',
            smooth: false
          }
        ]
      };
      option && myChart.setOption(option);

      window.addEventListener("resize", function () {
        myChart.resize(); //图表自适应的一个方法
      });
    },

    roll(t) {
      var parentItems = document.getElementById('parentItems');
      var childItems = document.getElementById('childItems');
      var itemsBox = document.getElementById('itemsBox');
      childItems.innerHTML = parentItems.innerHTML;
      itemsBox.scrollTop = 0;
      this.rollStart(t);
    },
    /**
     * 开启滚动。
     * @param t
     */
    rollStart(t) {
      var parentItems = document.getElementById('parentItems');
      var childItems = document.getElementById('childItems');
      var itemsBox = document.getElementById('itemsBox');
      this.rollStop();
      this.timer = setInterval(() => {
        // 当滚动高度大于列表内容高度时恢复为0
        if (itemsBox.scrollTop >= parentItems.scrollHeight) {
          itemsBox.scrollTop = 0;
        } else {
          itemsBox.scrollTop += 1;
        }
      }, t);
    },
    /**
     * 停止滚动。
     * @param t
     */
    rollStop() {
      clearInterval(this.timer);
    },
    /**
     * 获取并填充船只信息数据。
     */
    fillBoatInfoData() {
      fetch("./testData/boatInfoData.json")
        .then(res => {
          if (res.status === 200) {
            return res.json(); //实测解析成功，但会将lightStatus的值解析成字符串类型
            // return JSON.parse(res); //实测解析有误
            // return res.parseJSON(); //实测解析有误
            // return eval('(' + res + ')'); //实测解析有误
          } else {
            return {}
          }
        }).then(data => {
        console.log("fillBoatInfoData data= ", data)
        let boatInfoArr = data.boatInfoData;

        //下面开始填充数据
        let parentItems = document.querySelector("#parentItems");
        var itemsArr = [];
        boatInfoArr.forEach(item => {
          let operationStatus, alarmStatus, alarmStatusClassName;
          if (item.operationStatus === 0) {
            operationStatus = '运行';
          } else if (item.operationStatus === 1) {
            operationStatus = '空闲';
          } else if (item.operationStatus === 2) {
            operationStatus = '充电';
          } else if (item.operationStatus === 3) {
            operationStatus = '离线';
          } else {
            operationStatus = '未知';
          }

          if (item.alarmStatus === 0) {
            alarmStatus = '正常';
            alarmStatusClassName = 'alarm-status-green-dot';
          } else if (item.alarmStatus === 1) {
            alarmStatus = '一般';
            alarmStatusClassName = 'alarm-status-yellow-dot';
          } else if (item.alarmStatus === 2) {
            alarmStatus = '紧急';
            alarmStatusClassName = 'alarm-status-red-dot';
          }

          // <ul>
          //   <li>A001</li>
          //   <li>36KM/h</li>
          //   <li>80%</li>
          //   <li>36min</li>
          //   <li style="width: 15%">运行</li>
          //   <li style="width: 15%"><span class="alarm-status-green-dot"></span>正常</li>
          //   <li>进入</li>
          // </ul>
          itemsArr.push(
            '<ul>',
            '<li>', item.code, '</li>',
            '<li>', item.speed, 'KM/h', '</li>',
            '<li>', item.power * 100, '%', '</li>',
            '<li>', item.duration, 'min', '</li>',
            '<li style="width: 15%">', operationStatus, '</li>',
            '<li style="width: 15%"> <span class=', alarmStatusClassName, '></span>', alarmStatus, '</li>',
            '<li>进入</li>',
            '</ul>'
          )
        })

        let htmlStr = itemsArr.join('');
        // console.log("htmlStr= ", htmlStr)
        parentItems.innerHTML = htmlStr;

        this.$nextTick(() => {
          this.roll(20);

          // document.querySelector("#parentItems").onclick = () => {
          //   this.handleBoatInfoListClickEvent(event);
          // }
          // document.querySelector("#childItems").onclick = () => {
          //   this.handleBoatInfoListClickEvent(event);
          // }
        })
      })
    },
    /**
     * 初始化。
     */
    init() {
      //初始化地图。
      this.initMap0();

      //开启界面大小随着浏览器可视界面大小的变化而自适应调整
      let lazyFun;
      this.resize();
      window.onresize = () => {
        clearTimeout(lazyFun);
        lazyFun = setTimeout(() => {
          console.log("自动调整屏幕大小")
          // console.log("onresize this= ", this)
          this.resize()
        }, 500);
      }

      var digitShowSwitch = document.querySelector(".realtime-money-amount-value-show-switch");
      digitShowSwitch.onclick = () => {
        this.moneyAmountValueShow = !this.moneyAmountValueShow;
        if (!this.moneyAmountValueShow) {
          this.accumulatedTotalIncomeStartVal = 0;
        }
      };

      //为historyMoneySwitchIcon绑定点击事件
      var historyMoneySwitchIcon = document.querySelector("#historyMoneySwitchIcon");
      var historyMoney = document.querySelector(".history-money");
      historyMoneySwitchIcon.onclick = () => {
        if (this.isHistoryMoneyExpand) {
          historyMoneySwitchIcon.src = require("@/assets/img/history-money-down-icon.png");
          historyMoneySwitchIcon.title = "点击下拉显示往期金额图表";
          historyMoney.style.height = 0 + 'px';
          historyMoney.style.padding = 0;
          this.isHistoryMoneyExpand = false;
        } else {
          historyMoneySwitchIcon.src = require("@/assets/img/history-money-up-icon.png");
          historyMoneySwitchIcon.title = "点击隐藏往期金额图表";
          historyMoney.style.height = 550 + 'px';
          this.isHistoryMoneyExpand = true;
        }
      }

      //获取并填充船只信息数据。
      // this.fillBoatInfoData();

      var currCameraOrientationText = document.querySelector("#currCameraOrientationText");
      document.querySelector("#camera-up").onclick = () => {
        this.cameraOrientation = 1;
        currCameraOrientationText.innerHTML = "前"
        this.selectedChannelText = "前";
        this.switchCameraOrientation(1);
      }
      document.querySelector("#camera-right").onclick = () => {
        this.cameraOrientation = 2;
        currCameraOrientationText.innerHTML = "右"
        this.selectedChannelText = "右";
        this.switchCameraOrientation(2);
      }
      document.querySelector("#camera-down").onclick = () => {
        this.cameraOrientation = 3;
        currCameraOrientationText.innerHTML = "后"
        this.selectedChannelText = "后";
        this.switchCameraOrientation(3);
      }
      document.querySelector("#camera-left").onclick = () => {
        this.cameraOrientation = 4;
        currCameraOrientationText.innerHTML = "左"
        this.selectedChannelText = "左";
        this.switchCameraOrientation(4);
      }
      document.querySelector("#camera-center").onclick = () => {
        this.cameraOrientation = 5;
        currCameraOrientationText.innerHTML = "内"
        this.selectedChannelText = "内";
        this.switchCameraOrientation(5);
      }
      this.cameraOrientation = 5;
      this.selectedChannelText = "内";
      currCameraOrientationText.innerHTML = "内"

      document.querySelector("#boatCodeInfoShowStatusSwitchIcon").onclick = () => {
        if (this.boatMarkerLabelShow) {
          this.boatMarkerLabelShow = false;
        } else {
          this.boatMarkerLabelShow = true;
        }
        // this.recreateAllMarker();
      }

      document.querySelector("#backToCenterPointIcon").onclick = () => {
        if (this.map && this.centerPoint) {
          this.map.panTo(this.centerPoint);
        }
      }

      //获取历史金额数据。
      this.fetchHistoryMoneyData();

    },

    /**
     * 初始化萤石云播放器。
     */
    initYingshiyun1(selectedRecorderCode, channelNo) {
      this.ezopenOptions = {
        id: 'video-container', // 视频容器ID
        accessToken: this.yingshiyunAccessToken,
        // url: 'ezopen://open.ys7.com/L25674522/1.live',
        url: `ezopen://open.ys7.com/${selectedRecorderCode}/${channelNo}.live`,
        // simple - 极简版; pcLive-pc直播；pcRec-pc回放；mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
        //template: 'simple',
        plugin: ['talk'], // 加载插件，talk-对讲
        width: 375,
        height: 250,
        //只在自动播放成功时回调，默认不自动播放时不会回调
        // handleSuccess: handleSuccessCallback,
        // handleSuccess: function (successRes) {
        handleSuccess: successRes => {
          console.log("initYingshiyun1 handleSuccess successRes: ", successRes)
          // console.log("initYingshiyun1 handleSuccess this: ", this)

          this.$refs.fullscreenImageButton.style.display = "block";

          setTimeout(() => {
            this.stopPlayVideo1();
          }, 30000);
        },
        handleError: function (errorRes) {
          console.log("handleError errorRes: ", errorRes)
        },
        template: "9784db25c99047c5ab37801321d50434", //自定义模版：myTemplate1
        // themeData: {
        //   "autoFocus": 5,
        //   "poster": "https://resource.eziot.com/group1/M00/00/89/CtwQEmLl8r-AZU7wAAETKlvgerU237.png",
        //   "header": {
        //     "color": "#1890ff",
        //     "activeColor": "#FFFFFF",
        //     "backgroundColor": "#000000",
        //     "btnList": [
        //       // {
        //       //   "iconId": "deviceID",
        //       //   "part": "left",
        //       //   "defaultActive": 0,
        //       //   "memo": "顶部设备名称",
        //       //   "isrender": 1
        //       // },
        //       // {
        //       //   "iconId": "deviceName",
        //       //   "part": "left",
        //       //   "defaultActive": 0,
        //       //   "memo": "顶部设备ID",
        //       //   "isrender": 1
        //       // },
        //       // {
        //       //   "iconId": "cloudRec",
        //       //   "part": "right",
        //       //   "defaultActive": 0,
        //       //   "memo": "头部云存储回放",
        //       //   "isrender": 0
        //       // },
        //       // {
        //       //   "iconId": "rec",
        //       //   "part": "right",
        //       //   "defaultActive": 0,
        //       //   "memo": "头部本地回放",
        //       //   "isrender": 0
        //       // }
        //     ]
        //   },
        //   "footer": {
        //     "color": "#FFFFFF",
        //     "activeColor": "#1890FF",
        //     "backgroundColor": "#00000021",
        //     "btnList": [
        //       {
        //         "iconId": "play",
        //         "part": "left",
        //         "defaultActive": 1,
        //         "memo": "播放",
        //         "isrender": 1
        //       },
        //       {
        //         "iconId": "capturePicture",
        //         "part": "left",
        //         "defaultActive": 0,
        //         "memo": "截屏按钮",
        //         "isrender": 1
        //       },
        //       {
        //         "iconId": "sound",
        //         "part": "left",
        //         "defaultActive": 0,
        //         "memo": "声音按钮",
        //         "isrender": 1
        //       },
        //       // {
        //       //   "iconId": "pantile",
        //       //   "part": "left",
        //       //   "defaultActive": 0,
        //       //   "memo": "云台控制按钮",
        //       //   "isrender": 1
        //       // },
        //       {
        //         "iconId": "recordvideo",
        //         "part": "left",
        //         "defaultActive": 0,
        //         "memo": "录制按钮",
        //         "isrender": 1
        //       },
        //       // {
        //       //   "iconId": "talk",
        //       //   "part": "left",
        //       //   "defaultActive": 0,
        //       //   "memo": "对讲按钮",
        //       //   "isrender": 1
        //       // },
        //       {
        //         "iconId": "zoom",
        //         "part": "left",
        //         "defaultActive": 0,
        //         "memo": "电子放大",
        //         "isrender": 1
        //       },
        //       {
        //         "iconId": "hd",
        //         "part": "right",
        //         "defaultActive": 0,
        //         "memo": "清晰度切换按钮",
        //         "isrender": 1
        //       },
        //       {
        //         "iconId": "webExpend",
        //         "part": "right",
        //         "defaultActive": 0,
        //         "memo": "网页全屏按钮",
        //         "isrender": 1
        //       },
        //       // {
        //       //   "iconId": "expend",
        //       //   "part": "right",
        //       //   "defaultActive": 0,
        //       //   "memo": "全局全屏按钮",
        //       //   "isrender": 1
        //       // }
        //     ]
        //   }
        // },
      }

      this.yingshiyunPlayer1 = new EZUIKit.EZUIKitPlayer(this.ezopenOptions);
    },
    /**
     * 初始化萤石云播放器。
     */
    initYingshiyun2(selectedRecorderCode, selectedChannelNo, width, height) {
      console.log("initYingshiyun2: ", selectedRecorderCode, selectedChannelNo);

      console.log("initYingshiyun2 videoPlayDialog: ", this.$refs.videoPlayDialog)
      console.log("initYingshiyun2 style: ", this.$refs.videoPlayDialog.style)
      // let width = this.$refs.videoPlayDialog.style.width; //undefined
      // let height = this.$refs.videoPlayDialog.style.height; //undefined

      // let clientWidth = this.$refs.videoPlayDialog.$refs.dialog.clientWidth;
      console.log("document: ", document)
      let documentClientWidth = document.body.clientWidth;
      let documentClientHeight = document.body.clientHeight;
      console.log("document.body.clientWidth: ", document.body.clientWidth)
      console.log("document.body.clientHeight: ", document.body.clientHeight)
      let clientWidth = this.$refs.videoPlayDialog.$refs.dialog.children[1].clientWidth;
      let clientHeight = this.$refs.videoPlayDialog.$refs.dialog.children[1].clientHeight;
      console.log("initYingshiyun2 clientWidth: ", clientWidth + ", clientHeight: ", clientHeight)

      // let width = Math.ceil(documentClientWidth * 0.8);
      // let height = Math.ceil(width / (1280 / 720));
      console.log("initYingshiyun2 width: ", width + ", height: ", height)

      let newEzopenOptions = {
        id: 'videoPlayingContainer', // 视频容器ID
        accessToken: this.yingshiyunAccessToken,
        url: `ezopen://open.ys7.com/${selectedRecorderCode}/${selectedChannelNo}.live`,
        // simple - 极简版; pcLive-pc直播；pcRec-pc回放；mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
        //template: 'simple',
        // plugin: ['talk'], // 加载插件，talk-对讲
        width: 1280,
        height: 720,
        // width: clientWidth-15,
        // width: width,
        // height: clientHeight-45,
        // height: height,
        //只在自动播放成功时回调，默认不自动播放时不会回调
        // handleSuccess: handleSuccessCallback,
        // handleSuccess: function (successRes) {
        handleSuccess: successRes => {
          console.log("handleSuccess successRes1: ", successRes)
          console.log("handleSuccess this1: ", this)

          // setTimeout(() => {
          //   this.stopPlayVideo1();
          // }, 5000);
        },
        handleError: function (errorRes) {
          console.log("handleError errorRes: ", errorRes)
        },
        template: "1e0f82c145184cf6bd0e946bf47749a4", //自定义模版：myTemplate2
        // themeData: {
        //   "autoFocus": 5,
        //   "poster": "https://resource.eziot.com/group1/M00/00/89/CtwQEmLl8r-AZU7wAAETKlvgerU237.png",
        //   "header": {
        //     "color": "#1890ff",
        //     "activeColor": "#FFFFFF",
        //     "backgroundColor": "#000000",
        //     "btnList": [
        //       // {
        //       //   "iconId": "deviceID",
        //       //   "part": "left",
        //       //   "defaultActive": 0,
        //       //   "memo": "顶部设备名称",
        //       //   "isrender": 1
        //       // },
        //       // {
        //       //   "iconId": "deviceName",
        //       //   "part": "left",
        //       //   "defaultActive": 0,
        //       //   "memo": "顶部设备ID",
        //       //   "isrender": 1
        //       // },
        //       // {
        //       //   "iconId": "cloudRec",
        //       //   "part": "right",
        //       //   "defaultActive": 0,
        //       //   "memo": "头部云存储回放",
        //       //   "isrender": 0
        //       // },
        //       // {
        //       //   "iconId": "rec",
        //       //   "part": "right",
        //       //   "defaultActive": 0,
        //       //   "memo": "头部本地回放",
        //       //   "isrender": 0
        //       // }
        //     ]
        //   },
        //   "footer": {
        //     "color": "#FFFFFF",
        //     "activeColor": "#1890FF",
        //     "backgroundColor": "#00000021",
        //     "btnList": [
        //       // {
        //       //   "iconId": "play",
        //       //   "part": "left",
        //       //   "defaultActive": 1,
        //       //   "memo": "播放",
        //       //   "isrender": 1
        //       // },
        //       // {
        //       //   "iconId": "capturePicture",
        //       //   "part": "left",
        //       //   "defaultActive": 0,
        //       //   "memo": "截屏按钮",
        //       //   "isrender": 1
        //       // },
        //       // {
        //       //   "iconId": "sound",
        //       //   "part": "left",
        //       //   "defaultActive": 0,
        //       //   "memo": "声音按钮",
        //       //   "isrender": 1
        //       // },
        //       // {
        //       //   "iconId": "pantile",
        //       //   "part": "left",
        //       //   "defaultActive": 0,
        //       //   "memo": "云台控制按钮",
        //       //   "isrender": 1
        //       // },
        //       // {
        //       //   "iconId": "recordvideo",
        //       //   "part": "left",
        //       //   "defaultActive": 0,
        //       //   "memo": "录制按钮",
        //       //   "isrender": 1
        //       // },
        //       // {
        //       //   "iconId": "talk",
        //       //   "part": "left",
        //       //   "defaultActive": 0,
        //       //   "memo": "对讲按钮",
        //       //   "isrender": 1
        //       // },
        //       // {
        //       //   "iconId": "zoom",
        //       //   "part": "left",
        //       //   "defaultActive": 0,
        //       //   "memo": "电子放大",
        //       //   "isrender": 1
        //       // },
        //       // {
        //       //   "iconId": "hd",
        //       //   "part": "right",
        //       //   "defaultActive": 0,
        //       //   "memo": "清晰度切换按钮",
        //       //   "isrender": 1
        //       // },
        //       // {
        //       //   "iconId": "webExpend",
        //       //   "part": "right",
        //       //   "defaultActive": 0,
        //       //   "memo": "网页全屏按钮",
        //       //   "isrender": 1
        //       // },
        //       // {
        //       //   "iconId": "expend",
        //       //   "part": "right",
        //       //   "defaultActive": 0,
        //       //   "memo": "全局全屏按钮",
        //       //   "isrender": 1
        //       // }
        //     ]
        //   }
        // },
      }

      this.yingshiyunPlayer2 = new EZUIKit.EZUIKitPlayer(newEzopenOptions);
    },
    /**
     * 重新调整界面大小。
     */
    resize() {
      const designDraftWidth = 1920;//设计稿的宽度
      const designDraftHeight = 1080;//设计稿的高度

      const _el = document.getElementById('boatmonitor-container');
      if (!_el) return
      const wScale = window.innerWidth / designDraftWidth;
      const hScale = window.innerHeight / designDraftHeight;
      _el.style.transform = 'scale(' + wScale + ',' + hScale + ')';
      _el.style.webkitTransform = 'scale(' + wScale + ',' + hScale + ')';
    },

    initMap0() {
      console.log("initMap0 execute.")

      //创建坐标转换器对象
      this.convertor = new BMapGL.Convertor();

      let translatedWharfPointArr = [];
      this.centerPointArr = []; //地图中心点坐标集合。map根据这些点计算出合适的中心点和地图缩放级别。

      // debugger
      let wharfList = this.scenic.wharfList;

      if (wharfList && wharfList.length > 0) {
        let originWharfPointArr = [];

        wharfList.forEach(wharf => {
          // originWharfPointArr.push(new BMapGL.Point(wharf.lon, wharf.lat));
          let translatedPoint = wgs84tobd09(wharf.lon, wharf.lat);
          translatedWharfPointArr.push(new BMapGL.Point(translatedPoint[0], translatedPoint[1]))
          this.centerPointArr.push(new BMapGL.Point(translatedPoint[0], translatedPoint[1]));
        })
      } else {
        this.centerPointArr.push(new BMapGL.Point(116.404269, 39.917813)); //默认坐标点为北京天安门
      }

      let scenicId = this.scenic.scenicId;
      this.getShipLineList(scenicId).then(res => {
        this.initMap1(translatedWharfPointArr);

        //获取当前景区下的所有船只信息
        getBoatListByScenicId(scenicId).then(res => {
          let boatList = res.data;

          if (boatList && boatList.length > 0) {
            //先清空this.boatStatusInfoArray
            this.boatStatusInfoArray = [];
            boatList.forEach(boat => {
              let operationStatus = this.translateBoatStatusToOperationStatus(boat.status);

              let boatStatusInfo = {
                boatIdentityId: boat.boatIdentityId,
                boatCode: boat.boatCode,
                power: 0,
                speed: 0,
                onceDuration: 0, //单次时长，单位：秒
                operationStatus: operationStatus,
                alarmStatus: boat.alarmLevel, //报警级别。0：正常(即无报警)，1：警告，2：紧急。
                recorderCode: boat.recorderCode && boat.recorderCode.replace(/\s+/g, ""), //去除所有空格
                // recorderCode: boat.recorderCode.trim(),
                aggregateDuration: 0, //累计时长，单位：秒
                lon: boat.lastLongitude,
                lat: boat.lastLatitude,
                orientation: boat.lastOrientation,
                batteryTemperature: 0, //电池当前温度
              }

              //更新初始位置信息
              this.updateBoatLocationInfo(boatStatusInfo);

              this.boatStatusInfoArray.push(boatStatusInfo);
            })
          }

          //对船只状态信息数组进行重新排序。
          this.rearrangeForBoatStatusInfoArray();

          //此处需重新更新船只编号数组
          this.boatCodeArray = [];
          this.boatStatusInfoArray.forEach((boatStatusInfo, index) => {
            this.boatCodeArray.push(boatStatusInfo.boatCode);
          })

          //订阅websocket相关消息。注意：此部分代码需放在地图等组件初始化完成之后。
          this.pubId1 = pubsub.subscribe('updateBoatRealtimeStatusInfo', this.processBoatRealtimeStatusInfoUpdate);
          this.pubId2 = pubsub.subscribe('updateBoatBatteryStatusInfo', this.processBoatBatteryStatusInfoUpdate);
          this.pubId2 = pubsub.subscribe('updateBoatOperationStatusInfo', this.processBoatOperationStatusInfoUpdate);
          this.pubId2 = pubsub.subscribe('updateScenicOperationDynamicInfo', this.processScenicOperationDynamicInfoUpdate);
          this.pubId2 = pubsub.subscribe('updateScenicAccumulatedTotalIncome', this.processScenicAccumulatedTotalIncomeUpdate);
          this.pubId2 = pubsub.subscribe('updateScenicBoatAlarmInfo', this.processScenicBoatAlarmInfoUpdate);

          //测试代码
          // setTimeout(() => {
          //   this.updateOperationStatus("A000000000000001", 0);
          // }, 10000);
        })
      });
    },

    /**
     * 初始化地图。
     */
    initMap1(translatedWharfPointArr) {
      console.log("initMap1 execute.")

      //创建百度地图对象
      this.map = new BMapGL.Map('map-container', {
        minZoom: 0,
        maxZoom: 21
      });

      // var viewport = this.map.getViewport([leftTopPoint, leftBottomPoint, rightTopPoint, rightBottomPoint, centerPoint], {
      //   zoomFactor: 0
      // });

      var viewport = this.map.getViewport(this.centerPointArr, {
        zoomFactor: 0
      });

      this.curZoom = viewport.zoom;

      this.centerPoint = viewport.center;

      this.map.centerAndZoom(this.centerPoint, this.curZoom);
      this.map.enableScrollWheelZoom(true);

      //调整marker相关参数的大小。
      this.adjustRelativeParams(this.curZoom);

      // var geolocation = new BMapGL.Geolocation();
      // let that1 = this;
      // geolocation.getCurrentPosition(function (r) {
      //   console.log("getCurrentPosition r: ", r)
      //   if (this.getStatus() == BMAP_STATUS_SUCCESS) {
      //     if (r && r.address) {
      //       console.log("您当前所在城市：", r.address.city)
      //       that1.locationInfo.city = r.address.city;
      //
      //       getCityInfoByName(that1.locationInfo.city).then(res => {
      //         console.log("getCityInfoByName res: ", res)
      //
      //         let areaCode = res.data.areaCode;
      //         if (areaCode) {
      //           that1.getWeatherInfo(areaCode);
      //         } else {
      //           that1.getWeatherInfo(110000);   //北京市编码：110000
      //         }
      //       })
      //     }
      //   } else {
      //     // alert('failed' + this.getStatus());
      //     console.log("getCurrentPosition failed, status: ", this.getStatus());
      //     that1.getWeatherInfo(110000);   //北京市编码：110000
      //   }
      // });

      let cityAreaCode = this.scenic.cityAreaCode;
      if (cityAreaCode) {
        this.getWeatherInfo(cityAreaCode); //杭州市的城市编码为420100
      } else {
        this.getWeatherInfo("420100"); //武汉市的城市编码为420100
        // this.getWeatherInfo("330100"); //杭州市的城市编码为420100
      }


      //初始化船只信息map集合。
      // this.initBoatInfo(data_info);
      // this.initAllMark();

      //加载自定义的地图样式
      // map.setMapStyleV2({
      //   // styleId: 'd958af687f89d5d9e9b9be43874ddeb5' //我自己的地图样式
      //   styleId: '3fd7566ab3362219fd6c7898e9cd84a0' //璀璨提供的地图样式
      // })

      // console.log("this.$refs.header: ", this.$refs.header111.tagName)

      var that = this;
      //加载本地的地图自定义样式文件
      fetch("../map/custom_map_config.json")
        .then(res => {
          if (res.status === 200) {
            //json()是返回的Response对象提供的一个异步方法,会把返回的json字符串反序列化成对象,也被包装成一个Promise了。
            // 注意：json()方法只能调用一次，后面再次调用将无法获取到数据。
            var promiseJson = res.json();
            // console.log("res promiseJson= ", promiseJson)
            return promiseJson
          } else {
            return {}
          }
        })
        .then(text => {
          // console.log("setMapStyleV2, text= ", text)
          // console.log("fetch this= ", this) //此处的this就是当前vue组件
          that.map.setMapStyleV2({
            styleJson: text
          })
        });

      // 添加比例尺控件
      var scaleCtrl = new BMapGL.ScaleControl({
        offset: new BMapGL.Size(500, 10)
      });
      this.map.addControl(scaleCtrl);

      // 添加地图缩放控件
      var zoomCtrl = new BMapGL.ZoomControl({
        offset: new BMapGL.Size(540, 15)
      });
      this.map.addControl(zoomCtrl);

      //添加码头点覆盖物
      translatedWharfPointArr.forEach(point => {
        let icon = new BMapGL.Icon("/img/wharf_icon.png", new BMapGL.Size(24, 24), {anchor: new BMapGL.Size(8, -10)});
        let marker = new BMapGL.Marker(point, {
          icon: icon
        });        // 创建标注
        this.map.addOverlay(marker);
      })

      //将所有自动航线覆盖物添加到地图上。
      this.addAllShiplineOverlay();

      //读取并创建电子围栏覆盖物
      let fenceList = this.scenic.fenceList;
      // debugger
      if (fenceList && fenceList.length > 0) {
        let originFencePointArr = [];
        let translatedFencePointArr = [];
        let translatedFencePointArr1 = [];

        fenceList.forEach(fence => {
          let coordinates = fence.coordinates; //示例："114 352979,30.500601 114,352332 30502281 114 354668,30.504086 114,358441 30501908 114 355243 30.500383"
          let dotArr = coordinates.split(",");
          for (let i = 0; i < dotArr.length / 2; i++) {
            let lat = dotArr[2 * i];
            let lng = dotArr[2 * i + 1];
            let translatedPoint = wgs84tobd09(lng, lat);
            translatedFencePointArr1.push(new BMapGL.Point(translatedPoint[0], translatedPoint[1]));
          }
        })

        //创建电子围栏多边形覆盖物
        var fencePolygon = new BMapGL.Polygon(translatedFencePointArr1, {
          strokeStyle: 'dashed',
          strokeColor: 'yellow',
          // fillColor: 'rgba(102,192,172,0.1)', //多边形内部的填充色
          fillColor: '#005a65', //多边形内部的填充色
          strokeWeight: 3,
          strokeOpacity: 0.5
        });

        //添加电子围栏多边形覆盖物
        this.map.addOverlay(fencePolygon);

        // this.convertor.translate(originFencePointArr, COORDINATES_WGS84, COORDINATES_BD09, data => {
        //   if (data.status === 0) {
        //     for (let i = 0; i < data.points.length; i++) {
        //       translatedFencePointArr.push(new BMapGL.Point(data.points[i].lng, data.points[i].lat));
        //     }
        //
        //     //创建电子围栏多边形覆盖物
        //     var fencePolygon = new BMapGL.Polygon(translatedFencePointArr, {
        //       strokeStyle: 'dashed',
        //       strokeColor: 'yellow',
        //       // fillColor: 'rgba(102,192,172,0.1)', //多边形内部的填充色
        //       fillColor: '#005a65', //多边形内部的填充色
        //       strokeWeight: 3,
        //       strokeOpacity: 0.5
        //     });
        //
        //     //添加电子围栏多边形覆盖物
        //     this.map.addOverlay(fencePolygon);
        //   }
        // })
      }

      //监听地图比例缩放事件
      this.map.addEventListener("zoomend", function () {
        // 监听地图缩放事件
        var curMapZoom = that.map.getZoom();
        console.log("curMapZoom= ", curMapZoom)

        that.adjustRelativeParams(curMapZoom);

        // console.log("that.data_info= ", that.data_info)
        // that.recreateAllMarker()
        // that.updateAllMarkerAfterZoomed(); //此方法实测有问题
      });

      //给地图添加点击事件
      this.map.addEventListener('click', function (e) {
        console.log("click e: ", e)
        console.log("鼠标单击地方的经纬度(bd09)为：", e.latlng.lng + "," + e.latlng.lat)
        let translatedPoint = bd09towgs84(e.latlng.lng, e.latlng.lat);
        console.log("鼠标单击地方的经纬度(wgs84)为：", translatedPoint[0] + "," + translatedPoint[1])
      });
    },
    getWeatherInfo(areaCode) {
      axios.get(`https://restapi.amap.com/v3/weather/weatherInfo?key=${this.myGaodeApikey}&city=${areaCode}&extensions=all`).then(res => {
        console.log("weatherInfo: ", res)
        let forecastInfo = res.data.forecasts[0];
        let todayWeatherInfo = forecastInfo.casts[0];
        this.weatherInfo.city = forecastInfo.city;
        this.weatherInfo.minTemp = todayWeatherInfo.nighttemp;
        this.weatherInfo.maxTemp = todayWeatherInfo.daytemp;
        this.weatherInfo.weather = todayWeatherInfo.dayweather;
        this.weatherInfo.wind = todayWeatherInfo.daypower;
      })
    },
    /**
     * 调整marker相关参数的大小。
     * @param curMapZoom
     */
    adjustRelativeParams(curMapZoom) {
      console.log("adjustRelativeParams curMapZoom: ", curMapZoom)
      let iconSize = 22;
      let labelOffsetX = -5;
      let labelOffsetY = -30;
      let labelFontSize = 12; //谷歌浏览器最小字体为12px

      if (curMapZoom < 16.5) {
        iconSize = 22;
        labelFontSize = 12;
        labelOffsetY = -30;
      } else if (curMapZoom >= 16.5 && curMapZoom < 17) {
        iconSize = 26;
        labelFontSize = 12;
        labelOffsetY = -32;
      } else if (curMapZoom >= 17 && curMapZoom < 17.5) {
        iconSize = 32;
        labelFontSize = 12;
        labelOffsetY = -36;
      } else if (curMapZoom >= 17.5 && curMapZoom < 18) {
        iconSize = 38;
        labelFontSize = 13;
        labelOffsetY = -40;
      } else if (curMapZoom >= 18 && curMapZoom < 18.5) {
        iconSize = 44;
        labelFontSize = 13;
        labelOffsetY = -44;
      } else { // >=18.5
        iconSize = 46;
        labelFontSize = 13;
        labelOffsetY = -46;
      }
      this.iconSize = iconSize;
      this.labelOffsetX = labelOffsetX;
      this.labelOffsetY = labelOffsetY;
      this.labelFontSize = labelFontSize;
    },

    /**
     * 初始化船只信息map集合。
     * @param data_info
     */
    initBoatInfo(data_info) {
      for (let i = 0; i < data_info.length; i++) {
        this.boatInfoMap.set(data_info[i].code, data_info[i])
      }
    },

    getBoatInfoByCode(code) {
      let boatInfo = undefined;
      this.boatInfoMap.forEach((value, key, map) => {
        if (key === code) boatInfo = value;
      })
      return boatInfo;
    },

    createIcon(status) {
      var icon;
      var iconSize = this.iconSize;
      switch (status) {
        case this.boatStatus.running:
          icon = new BMapGL.Icon("/img/boat-green.png", new BMapGL.Size(iconSize, iconSize), {anchor: new BMapGL.Size(iconSize / 2, iconSize / 2)});
          break
        case this.boatStatus.warn:
          icon = new BMapGL.Icon("/img/boat-yellow.png", new BMapGL.Size(iconSize, iconSize), {anchor: new BMapGL.Size(iconSize / 2, iconSize / 2)});
          break
        case this.boatStatus.alarm:
          icon = new BMapGL.Icon("/img/boat-red.png", new BMapGL.Size(iconSize, iconSize), {anchor: new BMapGL.Size(iconSize / 2, iconSize / 2)});
          break
        default:
          icon = new BMapGL.Icon("/img/boat.png", new BMapGL.Size(iconSize, iconSize), {anchor: new BMapGL.Size(iconSize / 2, iconSize / 2)});
      }
      return icon;
    }
    ,

    createLabel(Labelcontent) {
      console.log("createLabel Labelcontent= ", Labelcontent)
      console.log("createLabel this.labelFontSize= ", this.labelFontSize)
      var label = new BMapGL.Label(Labelcontent.substr(4, 3), {offset: new BMapGL.Size(this.labelOffsetX, this.labelOffsetY)});
      label.setStyle({
        border: "1px solid rgb(204, 204, 204)",
        color: "rgb(0, 0, 0)",
        borderRadius: "5px",
        padding: "1px",
        background: "rgba(252,249,249,0.89)",
        fontSize: this.labelFontSize + "px",
        fontWeight: 400
      });
      return label;
    }
    ,

    createLabel1(Labelcontent) {
      console.log("createLabel1 Labelcontent= ", Labelcontent)
      let label = new BMapGL.Label(Labelcontent, {offset: new BMapGL.Size(this.labelOffsetX, this.labelOffsetY)});
      label.setStyle({
        border: "1px solid rgb(204, 204, 204)",
        color: "rgb(0, 0, 0)",
        borderRadius: "5px",
        padding: "1px",
        background: "rgba(252,249,249,0.89)",
        fontSize: this.labelFontSize + "px",
        fontWeight: 400
      });
      return label;
    },

    /**
     * 更新指定marker(此方法不更新且也不能更新label)。
     * @param marker
     */
    // {
    //   code: 'PT23001',
    //   lon: 114.18614,
    //   lat: 30.560898,
    //   status: 'running',
    //   rotation: 90,
    // }

    /**
     * 在地图上创建船只图标marker
     * @param boatStatusInfo
     */
    createBoatMarker(boatStatusInfo) {
      console.log("createBoatMarker boatStatusInfo: ", boatStatusInfo)

      let boatIdentityId = boatStatusInfo.boatIdentityId;

      let translatedPoint = wgs84tobd09(boatStatusInfo.lon, boatStatusInfo.lat);
      let boatMarker = boatStatusInfo.boatMarker;
      //如果地图上已添加了与此boatIdentityId对应的marker则先将其从地图上移除
      if (boatMarker) {
        let existLabel = boatMarker.getLabel();
        //实测必须添加如下这段代码，否则有时会一直多显示一个label，这个问题层困扰了自己好久！！！
        if (existLabel) {
          existLabel.setStyle({
            display: "none",
            background: "#005a65",
          })
        }

        this.map.removeOverlay(boatMarker)
      }

      //获取当前船只的运营状态。运营状态可取值：0=离线,1=维护,2=空闲,3=手动驾驶,4=自动驾驶。
      let operationStatus = boatStatusInfo.operationStatus;
      //获取当前船只的报警状态。报警状态：0: 无报警，1：警告，2：紧急。
      let alarmStatus = boatStatusInfo.alarmStatus;

      let iconUrl = "/img/boat-gray.png";
      if (operationStatus === 0 || operationStatus === 1) { //离线、维护状态
        iconUrl = "/img/boat-gray.png";
      } else {
        if (alarmStatus === 0) { //正常(无报警)
          if (operationStatus === 2) { //空闲状态
            iconUrl = "/img/boat-white.png";
          } else { //手动、自动状态
            iconUrl = "/img/boat-green.png";
          }
        } else if (alarmStatus === 1) { //警告
          iconUrl = "/img/boat-yellow.png";
        } else if (alarmStatus === 2) { //紧急
          iconUrl = "/img/boat-red.png";
        }
      }

      let icon = new BMapGL.Icon(iconUrl, new BMapGL.Size(this.iconSize, this.iconSize), {anchor: new BMapGL.Size(this.iconSize / 2, this.iconSize / 2)});
      boatMarker = new BMapGL.Marker(new BMapGL.Point(translatedPoint[0], translatedPoint[1]), {
        icon: icon,
        // rotation: data_info[i].rotation //通过这里设置实测无效
      });
      if (boatStatusInfo.orientation) {
        boatMarker.setRotation((boatStatusInfo.orientation + 27000) * 0.01);
      } else {
        boatMarker.setRotation(27000 * 0.01);
      }

      let boatCode = boatStatusInfo.boatCode;
      if (this.boatMarkerLabelShow) {
        boatMarker.setLabel(this.createLabel1(boatCode));
      }
      this.map.addOverlay(boatMarker);

      boatStatusInfo.boatMarker = boatMarker;
    },

    /**
     * 退出登录。
     * @returns {Promise<void>}
     */
    async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        new Promise((resolve, reject) => {
          console.log("用户主动退出登录，客户端关闭websocket连接.")
          closeSocket(1000, '用户主动退出登录，客户端关闭websocket连接.');
          resolve();
        }).then(res => {
          this.$store.dispatch('LogOut').then(() => {
            location.href = '/index';
          })
        })
      }).catch(() => {
      });
    },
    /**
     * 获取历史金额数据。
     */
    fetchHistoryMoneyData() {
      // fetch("./testData/historyMoneyAccount.json").then(res => {
      //   if (res.status === 200) {
      //     return res.json();
      //   } else {
      //     return {};
      //   }
      // }).then(data => {
      //   console.log("fetchHistoryMoneyData data.historyMoneyData= ", data.historyMoneyData);
      //   this.historyMoneyData = data.historyMoneyData;
      //
      //   this.currDiagramData = this.generateCurrDiagramData(this.currDiagramLevel);
      //   // console.log("this.currDiagramData= ", this.currDiagramData)
      //
      //   //初始化往期金额图表
      //   this.currDiagramDataIndex = this.currDiagramData.length - 1;
      //   this.createHistoryMoneyDiagram(this.currDiagramData[this.currDiagramDataIndex]);
      //
      //   this.updateProgressValue();
      // })
    },

    /**
     *
     * @param level 代表时间单位，0表示年，1表示月，2表示日。
     */
    generateCurrDiagramData(level) {
      let diagramData = [];
      let historyMoneyData = this.historyMoneyData;

      if (level === 0) { // 时间单位：年
        let yearNum = historyMoneyData.length; //共有几年的数据
        let xyData = {
          mainTitle: '', //主标题
          subTitle: '', //副标题
          xData: [], // x轴数据
          yData: [] // y轴数据
        };

        xyData.mainTitle = '历年';
        xyData.subTitle = '';

        for (let i = 0; i < yearNum; i++) {
          xyData.xData.push(historyMoneyData[i].year + "年")
          xyData.yData.push(historyMoneyData[i].total)
        }
        diagramData.push(xyData);

      } else if (level === 1) { // 时间单位：月
        for (let i = 0; i < historyMoneyData.length; i++) {
          let year = historyMoneyData[i].year;
          let monthDataArr = historyMoneyData[i].detailData;
          let monthDataArrLength = monthDataArr.length;

          let xyData = {
            mainTitle: '', //主标题
            subTitle: '', //副标题
            xData: [], // x轴数据
            yData: [] // y轴数据
          };
          xyData.mainTitle = year + '年';
          xyData.subTitle = '';
          for (let j = 0; j < 12; j++) {
            if (j < monthDataArrLength) {
              xyData.xData.push(monthDataArr[j].month + "月")
              xyData.yData.push(monthDataArr[j].total)
            } else {
              xyData.xData.push("")
            }
          }
          diagramData.push(xyData);
        }
      } else if (level === 2) { // 时间单位：日
        for (let i = 0; i < historyMoneyData.length; i++) {
          let year = historyMoneyData[i].year;

          let monthDataArr = historyMoneyData[i].detailData;
          for (let j = 0; j < monthDataArr.length; j++) {
            let month = monthDataArr[j].month;

            let dayDataArr = monthDataArr[j].detailData;
            let dayDataArrLength = dayDataArr.length;
            let divideNum = Math.floor(dayDataArrLength / 7);
            let remainderNum = dayDataArrLength % 7;

            // console.log("dayDataArrLength= " + dayDataArrLength + ", divideNum= " + divideNum + ", remainderNum= " + remainderNum)

            let startIndex = 0;
            for (let k = 0; k < divideNum + 1; k++) {
              let xyData = {
                mainTitle: '', //主标题
                subTitle: '', //副标题
                xData: [], // x轴数据
                yData: [] // y轴数据
              };
              xyData.mainTitle = month + '月';
              xyData.subTitle = year + '年';

              for (let l = 0; l < 7; l++) {
                if (startIndex + l < dayDataArrLength) {
                  xyData.xData.push(dayDataArr[startIndex + l].day + "日")
                  xyData.yData.push(dayDataArr[startIndex + l].total)
                } else {
                  xyData.xData.push("")
                }
              }
              diagramData.push(xyData);

              if (k === 0) {
                startIndex += remainderNum;
              } else {
                startIndex += 7;
              }
            }
          }

        }
      }

      return diagramData;
    }
    ,

    increaseDiagramShowLevel() {
      if (this.currDiagramLevel + 1 > 2) return;
      this.currDiagramLevel += 1;

      this.currDiagramData = this.generateCurrDiagramData(this.currDiagramLevel);
      //初始化往期金额图表
      this.currDiagramDataIndex = this.currDiagramData.length - 1;
      this.updateProgressValue();
      this.createHistoryMoneyDiagram(this.currDiagramData[this.currDiagramDataIndex]);
    }
    ,
    decreaseDiagramShowLevel() {
      if (this.currDiagramLevel - 1 < 0) return;
      this.currDiagramLevel -= 1;

      this.currDiagramData = this.generateCurrDiagramData(this.currDiagramLevel);
      //初始化往期金额图表
      this.currDiagramDataIndex = this.currDiagramData.length - 1;
      this.updateProgressValue();
      this.createHistoryMoneyDiagram(this.currDiagramData[this.currDiagramDataIndex]);
    }
    ,
    switchDiagramDataIndexLeft() {
      if (this.currDiagramDataIndex <= 0) return;
      this.currDiagramDataIndex -= 1;
      this.createHistoryMoneyDiagram(this.currDiagramData[this.currDiagramDataIndex]);
      this.updateProgressValue();
    }
    ,
    switchDiagramDataIndexRight() {
      if (this.currDiagramDataIndex >= this.currDiagramData.length - 1) return;
      this.currDiagramDataIndex += 1;
      this.createHistoryMoneyDiagram(this.currDiagramData[this.currDiagramDataIndex]);
      this.updateProgressValue();
    }
    ,
    updateProgressValue() {
      this.currProgressValue = Math.ceil(((this.currDiagramDataIndex + 1) / this.currDiagramData.length) * 100);
    }
    ,
    handleBoatInfoListClickEvent(event) {
      console.log("handleBoatInfoListClickEvent event= ", event)
      let boatCode;
      if (event.srcElement.nodeName === "UL") {
        boatCode = event.srcElement.children[0].innerText;
        console.log("handleBoatInfoListClickEvent clicked ul boatCode= ", boatCode)
      } else if (event.srcElement.nodeName === "LI") {
        boatCode = event.srcElement.parentNode.children[0].innerText;
        console.log("handleBoatInfoListClickEvent clicked li boatCode= ", boatCode)
      }
      // alert(boatCode)
    },
    handleFocus() {
      console.log("handleFocus exeucte.")
    },
    handleBlur() {
      console.log("handleBlur exeucte.")
    },
    handleCommand(command) {
      let page;
      if (command === "setting") {
        // page = this.$router.resolve({
        //   path: 'basicSetting', //注意：此处setting前面不要带/
        //   // query: {
        //   //   scenicId: row.scenicId
        //   // }
        // })
        // window.open(page.href, '_blank')

        this.$router.push({path: "basicSetting"})
      } else if (command === "profile") {
        // page = this.$router.resolve({
        //   path: '/user/profile',
        // })
        // window.open(page.href, '_blank')

        this.$router.push({path: "/user/profile"})
      }
    }
    ,
    /**
     * 获取当前日期，时间。
     */
    getCurrTime() {
      let nowDate = new Date();
      let days = new Array("日", "一", "二", "三", "四", "五", "六");

      let date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate(),
        hours: nowDate.getHours(),
        minutes: nowDate.getMinutes(),
        seconds: nowDate.getSeconds(),
        day: nowDate.getDay()
      }
      this.year = date.year;
      this.month = date.month >= 10 ? date.month : "0" + date.month;
      this.date = date.date >= 10 ? date.date : "0" + date.date;
      let newminutes = date.minutes < 10 ? "0" + date.minutes : date.minutes;
      let newseconds = date.seconds < 10 ? "0" + date.seconds : date.seconds;
      this.day = "星期" + days[date.day];
      // this.currTime = date.year + "-" + newmonth + "-" + newday + " " + date.hours + ":" + newminutes + ":" + newseconds;
      this.currTime = date.hours + ":" + newminutes + ":" + newseconds;
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },
    operationStatusTableRowClassName({row, rowIndex}) {
      return "operationStatusTableRowClass";
    }
    ,
    boatDetailInfoListTableRowClassName({row, rowIndex}) {
      return "boatDetailInfoListTableRowClass";
    },

    tableRowClassName({row, rowIndex}) {
      // console.log("tableRowClassName: row= ", row)
      let elTableRowStyle = "commonTableRowClass";
      if (row.type === "0") {
        elTableRowStyle = "commonTableRowClass";
      } else if (row.type === "1") {
        elTableRowStyle = "warnTableRowClass";
      } else if (row.type === "2") {
        elTableRowStyle = "urgencyTableRowClass";
      }
      return elTableRowStyle;
    },
    alarmInfoTableRowClassName({row, rowIndex}) {
      // console.log("alarmInfoTableRowClassName: row= ", row)
      let elTableRowStyle = "commonTableRowClass";
      if (row.level === 0) { //普通
        elTableRowStyle = "commonTableRowClass";
      } else if (row.level === 1) { //警告
        elTableRowStyle = "warnTableRowClass";
      } else if (row.level === 2) { //紧急
        elTableRowStyle = "urgencyTableRowClass";
      }
      return elTableRowStyle;
    },
    boatStatusInfoTableRowClassName({row, rowIndex}) {
      return "boatStatusInfoTableRowClass";
    },

    tableHeaderRowClassName({row, rowIndex}) {
      return 'tableHeaderRowClass'
    }
    ,
    latestAlarmTableHeaderRowClassName({row, rowIndex}) {
      return 'latestAlarmTableHeaderRowClass'
    },
    tableCellstyle({row, rowIndex}) {
      // if (rowIndex === 1 || rowIndex === 3) {
      //   return 'background:  red'
      // }
      return 'background: transparent;font-size: 14px;font-weight: 500'
    },

    //实测有效
    boatStatusInfoTableCellstyle({row, column, rowIndex, columnIndex}) {
      // console.log("boatStatusInfoTableCellstyle row: ", row)
      // console.log("boatStatusInfoTableCellstyle column: ", column)
      // console.log("boatStatusInfoTableCellstyle rowIndex: ", rowIndex)
      // console.log("boatStatusInfoTableCellstyle columnIndex: ", columnIndex)

      let operationStatus = row.operationStatus;
      if (operationStatus === 0 || operationStatus === 1) { //离线或维护状态
        return 'background: transparent;font-size: 14px;font-weight: 500;color: #BDBDBD'
      } else {
        if (columnIndex === 4) {
          if (operationStatus === 2) { //空闲状态
            return 'background: transparent;font-size: 14px;font-weight: 500'
          } else if (operationStatus === 3 || operationStatus === 4) { //手动驾驶或自动驾驶状态
            return 'background: transparent;font-size: 14px;font-weight: 500;color:#66FF00'
          }
        }
      }

      return 'background: transparent;font-size: 14px;font-weight: 500'
    },

    handleEdit() {
      this.$modal.msgSuccess("标记成功")
    },
    handleElTagClicked(index, row) {
      // console.log("handleElTagClicked row: ", row)
      this.isAlarmStatusEditing = true
      this.currEditingIndex = index
    },

    handleHistoryAlarmInfoStatusMarkButtonClicked(index, row) {
      this.isHistoryAlarmStatusEditing = true
      this.currEditingHistoryAlarmInfoIndex = index
    },
    saveHistoryAlarmStatusChange(index, row) {
      this.isHistoryAlarmStatusEditing = false

      console.log("saveHistoryAlarmStatusChange row: ", row);
      updateScenicAlarmInfo(row).then(res => {
        if (res.code === 200) {
          this.$modal.msgSuccess("标记成功！");
        } else {
          this.$modal.msgError("标记失败！");
        }
      }).catch(err => {
        this.$modal.msgError("标记失败！");
      }).finally(() => {
        if (this.selectedDateForHistoryAlarmInfoList) {
          this.getAssignedDayAllAlarmInfo(this.selectedDateForHistoryAlarmInfoList);
        }
      })
    },
    cacelHistoryAlarmStatusChange() {
      this.isHistoryAlarmStatusEditing = false
    },
    saveAlarmStatus() {
      this.isAlarmStatusEditing = false;
    },
    cacelAlarmStatusEditing() {
      this.isAlarmStatusEditing = false;
    },
    alarmStatusPopoverHiden() {
      console.log("alarmStatusPopoverHiden execute.")
      this.isAlarmStatusEditing = false;
      this.alarmStatusTabsActiveName = "first";
      this.selectedHistoryDate = "";
    },
    timeFormatter(row, column) {
      // console.log("timeFormatter: ", row, column);
      return moment(row.createTime).format("YYYY/MM/DD HH:mm");
    },
    alarmStatusCreateTimeFormatter(row, column) {
      // console.log("timeFormatter: ", row, column);
      return moment(row.createTime).format("MM/DD HH:mm");
    },
    operationStatusPopoverShow() {
      this.selectedHistoryDateForOperationDynamicInfo = moment().format("YYYY-MM-DD HH:mm:ss");
    },
    operationStatusPopoverHiden() {
    },
    alarmStatusPopoverShow() {
      this.selectedDateForHistoryAlarmInfoList = moment().format("YYYY-MM-DD HH:mm:ss");
    },
    showBoatDetailInfoListDialog() {
      this.dialogFormVisible = true;
    },
    speedFormatter(row, column) {
      return row.speed + "KM/h";
    },
    batteryPowerFormatter(row, column) {
      return row.power + "%";
    },
    batteryTemperatureFormatter(row, column) {
      return row.batteryTemperature + "℃";
    },
    aggregateDurationFormatter(row, column) {
      let aggregateDuration = row.aggregateDuration;
      return Math.floor(aggregateDuration / 60) + "min";
    },
    onceDurationFormatter(row, column) {
      let onceDuration = row.onceDuration;
      return Math.floor(onceDuration / 60) + "min";
    },
    recorderCodeFormatter(row, column) {
      let recorderCode = row.recorderCode;
      return recorderCode.trim();
    },
    operationStatusFormatter(row, column) {
      let operationStatus;
      if (row.operationStatus === 0) {
        operationStatus = '离线';
      } else if (row.operationStatus === 1) {
        operationStatus = '维护';
      } else if (row.operationStatus === 2) {
        //此运营状态包含船只状态中的如下状态：2=空闲,3=拼团中,4=上船倒计时中,5=开锁等待中
        operationStatus = '空闲';
      } else if (row.operationStatus === 3) {
        operationStatus = '手动';
      } else if (row.operationStatus === 4) {
        operationStatus = '自动';
      } else {
        operationStatus = '未知';
      }

      return operationStatus;
    },
    alarmStatusFormatter(row, column) {
      let alarmStatus;
      if (row.alarmStatus === 0) {
        alarmStatus = '正常';
      } else if (row.alarmStatus === 1) {
        alarmStatus = '一般';
      } else if (row.alarmStatus === 2) {
        alarmStatus = '紧急';
      } else {
        alarmStatus = "未知";
      }
      return alarmStatus;
    },
    lightStatusFormatter(row, column) {
      if (row.alarmStatus === 0) {
        return "已开启";
      } else {
        return "已关闭";
      }
    },

    /**
     * 通过切换船只编号查看指定船只的摄像头。默认查看船只内部摄像头。
     * @param e
     */
    handleVideoBoatSelectChange(e) {
      let selectedBoatCode = e.target.value;
      // console.log("handleVideoBoatSelectChange selectedBoatCode: ", selectedBoatCode)

      this.cameraOrientation = 5;
      this.selectedChannelNo = 5;

      this.selectedBoatStatusInfoForVideo = this.getBoatStatusInfoByBoatCode(selectedBoatCode);
      if (this.selectedBoatStatusInfoForVideo) {
        //获取当前所选船只的编号
        this.selectedBoatCodeForVideo = this.selectedBoatStatusInfoForVideo.boatCode;
        //获取当前所选船只的录像机编号
        let selectedRecorderCode = this.selectedBoatStatusInfoForVideo.recorderCode;

        if (selectedRecorderCode) {
          if (!this.yingshiyunPlayer1) { //萤石云播放器还未初始化
            this.initYingshiyun1(selectedRecorderCode, 5); //首次初始化时默认通道号为5.
          } else { //萤石云播放器已初始化，此时需要做的是切换播放地址(主要是录像机编号和通道号)
            this.switchVideo(selectedRecorderCode, 5); //保持channelNo默认为5，channelNo=5对应的就是中间的摄像头
          }
        } else {
          // this.$modal.msgError("当前所选船只的录像机编号为空，无法播放摄像头视频！");
          this.switchVideo("AB1111111", 5);
        }
      } else {
        // this.$modal.msgError("当前所选船只的信息为空，无法播放摄像头视频！");
        this.switchVideo("AB1111111", 5);
      }
    },

    switchVideo(recorderCode, channelNo) {
      console.log("switchVideo: ", recorderCode, channelNo)
      // this.currVideoUrl = `https://open.ys7.com/ezopen/h5/iframe?url=ezopen://open.ys7.com/${recorderCode}/${channelNo}.live&audio=1&accessToken=at.6hcvy6s85qslmvqn7do8wlk15ii3gqxm-5c0kob2r5b-0bbfgu7-anwh5ohut`

      this.selectedChannelNo = channelNo;

      this.$refs.palyVideoImageButton.style.display = "none";
      this.$refs.fullscreenImageButton.style.display = "none";

      this.yingshiyunPlayer1.changePlayUrl({
        type: "live", //播放地址类型，"live":预览，"rec"：回放；“cloud.rec”：云存储回放
        deviceSerial: recorderCode,
        channelNo: channelNo
      }).then(url => {
        console.log("yingshiyunPlayer1 播放地址切换成功, url: ", data);
      }).catch(err => {
        console.log("yingshiyunPlayer1 播放地址切换失败, url: ", err)
      }).finally(() => {
        console.log("yingshiyunPlayer1 changePlayUrl finally.")

        this.yingshiyunPlayer1.Theme.changeTheme("9784db25c99047c5ab37801321d50434"); //自定义模版：myTemplate1
      });
    },

    /**
     *
     * @param cameraOrientation 1：前，2：右，3：后:4：左:5：中
     */
    switchCameraOrientation(cameraOrientation) {
      // console.log("switchCameraOrientation cameraOrientation: ", cameraOrientation);

      if (this.selectedBoatStatusInfoForVideo) {
        let recorderCode = this.selectedBoatStatusInfoForVideo.recorderCode;
        if (recorderCode) {
          if (cameraOrientation === 1) { //前
            this.switchVideo(recorderCode, 2);
          } else if (cameraOrientation === 2) { //右
            this.switchVideo(recorderCode, 3);
          } else if (cameraOrientation === 3) {
            this.switchVideo(recorderCode, 4);
          } else if (cameraOrientation === 4) {
            this.switchVideo(recorderCode, 1);
          } else if (cameraOrientation === 5) {
            this.switchVideo(recorderCode, 5);
          }
        }
      } else {
        this.$modal.msgError("当前所选船只的信息为空，无法切换摄像头通道！");
      }
    },
    handleBoatInfoTableRowClick(row, column, event) {
      event.stopPropagation();
      console.log("handleBoatInfoTableRowClick: ", row, column, event);
    },
    startPlayVideo1() {
      console.log("startPlayVideo1 execute.")
      if (this.yingshiyunPlayer1) {
        this.yingshiyunPlayer1.play().then(() => {
          console.log("yingshiyunPlayer1 开启播放成功！")

          this.$refs.palyVideoImageButton.style.display = "none";
          this.$refs.fullscreenImageButton.style.display = "block";
        });
      }
    },
    openFullscreen() {
      console.log("openFullscreen execute.")

      //切换大屏前先暂停小屏的播放
      this.stopPlayVideo1();

      this.startPlayVideo2();
    },

    startPlayVideo2() {
      console.log("startPlayVideo: this.selectedBoatStatusInfoForVideo= ", this.selectedBoatStatusInfoForVideo)
      if (this.selectedBoatStatusInfoForVideo) {
        let recorderCode = this.selectedBoatStatusInfoForVideo.recorderCode;
        console.log("startPlayVideo: recorderCode= ", recorderCode)
        console.log("startPlayVideo: this.selectedChannelNo= ", this.selectedChannelNo)
        if (recorderCode && this.selectedChannelNo) {
          this.videoPlayDialogVisible = true;

          setTimeout(() => {
            this.videoPlayDialogVisible = false;
          }, 300000) //5分钟后自动关闭视频播放框

          let containerSize = this.getVideoPlayingContainerSize();
          let width = containerSize.width;
          let height = containerSize.height;

          // this.videoPlayDialogWidth = width;

          this.$nextTick(() => {
            let videoPlayingContainer = document.getElementById("videoPlayingContainer");
            // console.log("videoPlayingContainer: ", videoPlayingContainer)
            // videoPlayingContainer.style.width = width;
            // videoPlayingContainer.style.height = height;
            // videoPlayingContainer.style.backgroundColor = "white";

            this.initYingshiyun2(recorderCode, this.selectedChannelNo, width, height);
          })
        }
      }
    },
    getVideoPlayingContainerSize() {
      let documentClientWidth = document.body.clientWidth;
      let documentClientHeight = document.body.clientHeight;
      let width = Math.ceil(documentClientWidth * 0.8);
      let height = Math.ceil(width / 1.7777); // 1280/720约等于1.7777
      let resultSize = {
        width,
        height
      };
      console.log("getVideoPlayingContainerSize resultSize: ", resultSize);

      return resultSize;
    },
    /**
     * 停止播放萤石云视频。
     */
    stopPlayVideo1() {
      this.yingshiyunPlayer1.stop().then(data => {
        console.log("stopPlayVideo1 execute!")

        this.$refs.palyVideoImageButton.style.display = "block";
        // this.$refs.fullscreenImageButton.style.display = "none";
      })
    },
    handleVideoContainerMouseEnter() {
      console.log("handleVideoContainerMouseEnter")
      // this.$refs.videoMaskLayer.style.display = "block";
      this.$refs.videoMaskLayer.style.backgroundColor = "rgba(148, 153, 155, 0.5)";
    },
    handleVideoContainerMouseLeave() {
      console.log("handleVideoContainerMouseLeave")
      // this.$refs.videoMaskLayer.style.display = "none";
      this.$refs.videoMaskLayer.style.backgroundColor = "transparent"
    },
    handleVideoPlayDialogClose() {
      console.log("handleVideoPlayDialogClose execute.")
      if (this.yingshiyunPlayer2) {
        this.yingshiyunPlayer2.stop().then(() => {
          console.log("yingshiyunPlayer2 停止播放！")

          this.yingshiyunPlayer2 = null;
        });
      }
    },
    handleTest1() {
      console.log("handleTest1 execute.")
      // let text = '游船A04发来救援信息，请立即处理！联系电话:17740699979';
      let text = '游船A04发来救援信息，请立即处理！';
      let notify = this.$notify({
        title: '报警信息',
        type: 'warning',
        message: text,
        position: 'top-left',
        offset: 300,
        duration: 0
      });

      console.log("notify: ", notify)

      //取消点击esc等按键关闭通知的按键事件
      document.removeEventListener('keydown', notify.keydown);

      playAudio(text)
    },
  }
}
</script>

<style scoped>
.main-body {
  --zindex: 100;
  height: 100%;
  overflow: hidden;
}

>>> ul li {
  list-style-type: none;
}

.boatmonitor-container {
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  /*overflow: hidden;*/
}

#map-container {
  width: 100%;
  height: 100%;
  /*overflow: hidden;*/
}

.header {
  --headerHeight: 80px; /*--header区高度*/
  width: 100%;
  height: var(--headerHeight);
  background: url("~@/assets/img/header_bac.png") 0px 0px/100% 100% no-repeat;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: -30px;
}

.header-left {
  float: left;
  width: 30%;
  height: 100%;
  margin-left: 0;
}

.porpoise-icon {
  width: 350px;
  height: 50px;
  margin: 40px 5px 10px 45px;
}

.header-left-icon {
  width: 100px;
  height: 18px;
  margin: 20px 5px 22px 50px;
}

.header-center {
  float: left;
  width: 40%;
  height: 100%;
}

.header-right {
  float: left;
  width: 30%;
  height: 100%;
  position: relative;
}

.header-right-container {
  display: flex;
  align-items: center;
  margin: 45px 0 0 45px;
}

.header-right-icon {
  width: 90px;
  height: 18px;
}

.header-right-info {
  padding-left: 20px;
  color: #72ddda;
  font-size: 15px;
  display: flex;
  align-items: center;
}

.divider-item {
  width: 1px;
  height: 30px;
  background-color: #43807e;
  margin: 0 10px;
}

.header-right-info .location-info img {
  width: 13px;
  height: 19px;
}

.header-right-info .weather-info img {
  width: 15px;
  height: 10px;
}

.el-dropdown {
  /*background-color: pink;*/
}

.el-dropdown-menu {
  background-color: #052d3d;
  /*边框原色 */
  /*border: 1px solid #e6ebf5;*/
  /*自定义边框颜色 */
  border: 1px solid #94999b;
}

.el-dropdown-menu__item--divided::before {
  /*background-color: #052d3d;*/
}

.el-dropdown-menu__item {
  color: white;
}

.el-dropdown-menu li:hover {
  background-color: #052d3d;
  /*color: red;*/
}

.more-settings-dropdown {
  cursor: pointer;
  margin-left: 30px;
}

.more-settings-dropdown div img {
  width: 20px;
  height: 20px;
}

.header-title {
  height: 100%;
  color: white;
  text-align: center;
  line-height: var(--headerHeight);
}


.center-left {
  width: 25%;
  height: 100%;
  background: url("~@/assets/img/center-left-bg.png") 0 0/100% 100% no-repeat;
  position: fixed;
  z-index: var(--zindex);
  top: 0;
  left: 0;
}

.realtime-money {
  background: url("~@/assets/img/realtime_money_bg.png") 0 0/100% 100% no-repeat;
  margin: 120px 0 10px 15px;
  padding: 25px 10px;
}

.realtime-money-title {
  width: 100%;
  height: 60px;
  background: url("~@/assets/img/title-bg.png") 0 0/100% 100% no-repeat;
}

.realtime-money-title-icon {
  float: left;
  height: 100%;
  margin-left: 15px;
}

.realtime-money-title-icon > img {
  width: 35px;
  height: 35px;
  margin-top: 12px;
}

.realtime-money-title-text {
  float: left;
  height: 100%;
  margin-left: 10px;
  text-align: center;
  line-height: 60px;
  color: white;
  font-weight: 700;
  font-size: 18px;
}

.realtime-money-amount {
  display: flex;
  flex-direction: column;
  width: 95%;
  height: 135px;
  background: url("~@/assets/img/digit-bg.png") 0 0/100% 100% no-repeat;
  align-items: center;
  margin: 15px 10px 0 10px;
}

.realtime-money-amount-value-show-switch {
  align-self: flex-end;
  margin: 15px 15px 0 0;
  cursor: pointer;
}

.realtime-money-amount-value-show-switch img {
  width: 22px;
  height: 12px;
}

.realtime-money-amount-value {
  text-align: center;
  color: white;
  font-weight: 700;
  font-size: 55px;
}

.history-money-show-switch-zoom {
  height: 35px;
  width: 100%;
  background: url("~@/assets/img/history-money-show-or-hide-control-bg.png") 0 0/100% 100% no-repeat;
  display: flex;
  /*justify-content: center;*/
  /*align-items: center;*/
}

.history-money-show-switch-zoom img {
  margin: 0 auto 15px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.history-money {
  /*width: 100%;*/
  height: 0;
  overflow: hidden;
  background: url("~@/assets/img/history_money_bg.png") 0 0/100% 100% no-repeat;
  margin: 10px 0 0 15px;
  transition: .8s;
}

.history-money-title {
  width: 100%;
  height: 60px;
  background: url("~@/assets/img/title-bg.png") 0 0/100% 100% no-repeat;
  margin: 20px 10px 5px;
}

.history-money-title-icon {
  float: left;
  height: 100%;
  margin-left: 15px;
}

.history-money-title-icon > img {
  width: 35px;
  height: 35px;
  margin-top: 12px;
}

.history-money-title-text {
  float: left;
  height: 100%;
  margin-left: 10px;
  text-align: center;
  line-height: 60px;
  color: white;
  font-weight: 700;
  font-size: 18px;
}

.history-money-info-more-control {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.history-money-info-more-control > img {
  width: 21px;
  height: 4px;
  margin: 10px 15px 0 0;
  cursor: pointer;
}

.history-money-diagram {
  min-height: 350px;
  /*height: 70%;*/
  width: 90%;
  margin: 0 auto;
  /*margin-bottom: -20px;*/
}

.history-money-diagram-control-progress {
  display: flex;
  justify-content: center;
  align-items: center;
}

.history-money-diagram-control-progress img {
  width: 10px;
  height: 17px;
  cursor: pointer;
}

.history-money-diagram-control-progress .el-progress {
  width: 85%;
  margin: 0 10px;
}

.history-money-diagram-control-button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.history-money-diagram-control-button img:nth-child(1) {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  cursor: pointer;
}

.history-money-diagram-control-button img:nth-child(2) {
  width: 18px;
  height: 3px;
  margin-left: 10px;
  cursor: pointer;
}

.el-button {
  background-color: transparent;
  border: 1px solid transparent;
}

.opration-status {
  background: url("~@/assets/img/realtime_money_bg.png") 0 0/100% 100% no-repeat;
  margin: 0 0 0 15px;
  padding: 25px 10px 15px;
}

.opration-status-title {
  display: flex;
  width: 100%;
  height: 60px;
  background: url("~@/assets/img/title-bg.png") 0 0/100% 100% no-repeat;
}

.opration-status-title-icon {
  float: left;
  height: 100%;
  margin-left: 15px;
}

.opration-status-title-icon > img {
  width: 35px;
  height: 35px;
  margin-top: 12px;
}

.opration-status-title-text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
  margin-left: 10px;
  text-align: left;
  /*line-height: 60px;*/
  color: white;
  font-weight: 700;
  font-size: 18px;
}

.opration-status-title-text span:nth-child(1) {
  flex-grow: 2;
  line-height: 40px;
  margin-bottom: -5px;
}

.opration-status-title-text span:nth-child(2) {
  flex-grow: 1;
  line-height: 20px;
  margin-top: -5px;
  font-size: 10px;
  color: #0bd5d5;
  font-weight: 500;
}

.operation-status-info {
  margin-top: 5px;
  min-height: 140px;
  font-size: 15px;
}

.operation-status-info-more-control {
  flex-grow: 1;
  text-align: right;
}

.operation-status-info-more-control > img {
  width: 21px;
  height: 5px;
  margin: 40px 5px 0 0;
}

.operation-status-info-more-control img:hover {
  cursor: pointer;
}

.operation-status-info ul {
  display: flex;
  color: white;
  flex-direction: column;
  align-items: flex-start;
}

.operation-status-info ul li {
  margin: 5px 18px;
}

.alarm-status {
  background: url("~@/assets/img/realtime_money_bg.png") 0 0/100% 100% no-repeat;
  margin: 10px 0 0 15px;
  padding: 25px 10px 15px;
  color: #ededec;
}

.alarm-status-title {
  display: flex;
  width: 100%;
  height: 60px;
  background: url("~@/assets/img/title-bg.png") 0 0/100% 100% no-repeat;
}

.alarm-status-title-icon {
  float: left;
  height: 100%;
  margin-left: 15px;
}

.alarm-status-title-icon > img {
  width: 35px;
  height: 35px;
  margin-top: 12px;
}

.alarm-status-title-text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
  margin-left: 10px;
  text-align: left;
  /*line-height: 60px;*/
  color: white;
  font-weight: 700;
  font-size: 18px;
}

.alarm-status-title-text span:nth-child(1) {
  flex-grow: 2;
  line-height: 40px;
  margin-bottom: -5px;
}

.alarm-status-title-text span:nth-child(2) {
  flex-grow: 1;
  line-height: 20px;
  margin-top: -5px;
  font-size: 10px;
  color: #0bd5d5;
  font-weight: 500;
}

.alarm-status-info-more-control {
  flex-grow: 1;
  display: inline-block;
  text-align: right;
}

.alarm-status-info-more-control img {
  width: 21px;
  height: 5px;
  margin: 40px 5px 0 0;
}

.alarm-status-info-more-control img:hover {
  cursor: pointer;
}

.alarm-status-info-list {

}

.alarm-status-info-list ul {
  display: flex;
  align-items: center;
}

.alarm-status-info-list-title li {
  /*float: left;*/
  width: 25%;
  text-align: center;
  margin: 15px 0 10px 0;
}

.alarm-status-info-list-content {
  /*height: 220px;*/
}

.alarm-status-info-list-content ul li {
  width: 25%;
  text-align: center;
  margin: 5px 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.alarm-common-level {
  color: yellow;
}

.alarm-warn-level {
  color: yellow;
}

.alarm-urgency-level {
  color: #f35858;
}

>>> .alarm-status-green-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #08cc08;
  margin-right: 8px;
}

>>> .alarm-status-yellow-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: yellow;
  margin-right: 8px;
}

>>> .alarm-status-red-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: red;
  margin-right: 8px;
}

.center-center {
  display: flex;
  align-items: center;
  position: fixed;
  z-index: 999;
  bottom: 35px;
  left: 943px;
  margin-right: 30px;
}

.boat-code-show-status-switch-control img {
  width: 34px;
  height: 34px;
  cursor: pointer;
  margin-left: 15px;
}

.back_to_center_point img {
  width: 44px;
  height: 44px;
  cursor: pointer;
  margin-right: 15px;
}

.center-right {
  width: 28%;
  height: 100%;
  background: url("~@/assets/img/center-right-bg.png") 0 0/100% 100% no-repeat;
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
}

.video-play-div {
  /*position: relative;*/
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

.video-play-container {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2001;
  width: 800px;
  height: 600px;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.4);
}

.boat-info {
  background: url("~@/assets/img/boat-info-bg.png") 0 0/100% 100% no-repeat;
  /*margin: 10px 0 0 15px;*/
  margin: 120px 10px 0 15px;
  padding: 25px 10px 15px;
  color: #ededec;
}

.boat-info-title {
  display: flex;
  width: 100%;
  height: 60px;
  background: url("~@/assets/img/title-bg.png") 0 0/100% 100% no-repeat;
}

.boat-info-title-icon {
  float: left;
  height: 100%;
  margin-left: 15px;
}

.boat-info-title-icon > img {
  width: 35px;
  height: 35px;
  margin-top: 12px;
}

.boat-info-title-text {
  float: left;
  flex-grow: 1;
  height: 100%;
  margin-left: 10px;
  text-align: left;
  line-height: 60px;
  color: white;
  font-weight: 700;
  font-size: 18px;
}

.boat-info-more-control {
  flex-grow: 1;
  display: inline-block;
  text-align: right;
}

.boat-info-more-control > img {
  width: 21px;
  height: 5px;
  margin: 45px 10px 0 0;
}

.boat-info-more-control > img:hover {
  cursor: pointer;
}

.boat-info-more-detail-info {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  color: #72ddda;
  font-size: 14px;
  margin: 10px 5px 0 10px;
}


>>> .boat-info-list ul {
  display: flex;
  align-items: center;
}

.boat-info-list-title li {
  /*float: left;*/
  width: 14%;
  text-align: center;
  margin: 15px 0 10px 0;
}

.boat-info-list-content {
  overflow: hidden;
  min-height: 365px;
}

.boat-info-list-content .seamless-warp {
  height: 365px;
  overflow: hidden;
}

>>> .boat-info-list-content ul li {
  width: 14%;
  text-align: center;
  margin: 5px 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}

>>> .boat-info-list-content ul:nth-child(odd) {
  color: rgba(245, 239, 239, 0.94);
}

>>> .boat-info-list-content ul:nth-child(even) {
  background-color: #043645;
  color: rgba(245, 239, 239, 0.94);
}

>>> .boat-info-list-content ul:hover {
  background-color: #086581;
  /*cursor: pointer;*/
}

/*.boat-info-list-content ul li:nth-child(6)::before {*/
/*  content: 'div';*/
/*}*/


.boat-video {
  /*height: 30%;*/
  background: url("~@/assets/img/boat-info-bg.png") 0 0/100% 100% no-repeat;
  margin: 20px 10px 0 15px;
  padding: 25px 10px 25px 10px;
}

.boat-video-title {
  position: relative;
  width: 100%;
  height: 60px;
  /*margin-bottom: 10px;*/
  background: url("~@/assets/img/title-bg.png") 0 0/100% 100% no-repeat;
  /*background-color: pink;*/
  line-height: 60px;
  text-align: center;
}

.boat-video-title-icon {
  float: left;
  height: 100%;
  margin-left: 15px;
  /*background-color: red;*/
}

.boat-video-title-icon > img {
  width: 35px;
  height: 35px;
  margin-top: 12px;
}

.boat-video-title-text {
  float: left;
  height: 100%;
  margin-left: 10px;
  /*background-color: purple;*/
  text-align: center;
  line-height: 60px;
  color: white;
  font-weight: 700;
  font-size: 18px;
}

.boat-video-div {
  width: 100%;
  display: flex;
  margin: 15px 0 0 10px;
}

.boat-video-div .video-container-parent {
  position: relative;
  width: 375px;
  height: 250px;
  background-color: black;
  border: 1px solid whitesmoke
}

.boat-video-div .video-container {
  width: 100%;
  height: 100%;
}

.boat-video-div .video-maskLayer {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  /*background-color: rgba(148, 153, 155, 0.5);*/
  /*background-color: transparent;*/
  /*justify-content: center;*/
  /*align-items: center;*/
}

.boat-video-div .video-maskLayer .palyVideoImageButton {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  width: 56px;
  height: 56px;
}

.boat-video-div .video-maskLayer .fullscreenImageButton {
  display: none;
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 32px;
  height: 32px;
  cursor: pointer;
}

.boat-video-div .video-stream {
  width: 375px;
  height: 250px;
  object-fit: fill;
}

.video-cam-switch-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  margin: 0 6px;
}

.video-cam-switch-div .video-boat-select-div {
  height: 25px;
}

.video-cam-switch-div .video-boat-switch-buttons-control {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  /*background-color: pink;*/
}

.video-cam-switch-div .video-boat-switch-buttons-control .up-button {
  margin-right: 1px;
}

.video-cam-switch-div .video-boat-switch-buttons-control .center {
  display: flex;
  align-items: center;
  margin: 5px 0;
}

.video-cam-switch-div .video-boat-switch-buttons-control .down-button {
  margin-top: 3px;
}

.video-cam-switch-div .video-boat-switch-buttons-control .center img:nth-child(2) {
  margin: 2px 8px;
}

.video-cam-switch-div .video-boat-switch-buttons-control .switch-up-down-button-icon {
  width: 23px;
  height: 20px;
}

.video-cam-switch-div .video-boat-switch-buttons-control .switch-up-down-button-icon:hover {
  cursor: pointer;
}

.video-cam-switch-div .video-boat-switch-buttons-control .switch-left-right-button-icon {
  width: 20px;
  height: 23px;
}

.video-cam-switch-div .video-boat-switch-buttons-control .switch-left-right-button-icon:hover {
  cursor: pointer;
}

.video-cam-switch-div .video-boat-switch-buttons-control .switch-boat-button-icon {
  width: 28px;
  height: 72px;
}

.video-cam-switch-div .video-boat-switch-buttons-control .switch-boat-button-icon:hover {
  cursor: pointer;
}

.video-boat-select-div select {
  height: 100%;
  background-color: transparent;
  color: rgba(245, 239, 239, 0.94);
  border-top-right-radius: 8px;
}

.video-boat-select-div select option {
  background-color: rgba(49, 47, 47, 0.94);
}

>>> .el-tabs__item {
  color: white;
}

/*>>> .el-tabs__item:hover {*/
/*  color: yellow;*/
/*}*/

/*切换活动项的文字颜色*/
>>> .el-tabs__item.is-active {
  /*color: #13e513 !important;*/
  color: #06f806 !important;
  /*color: blue !important;*/
}

/*切换活动项的长条颜色*/
/deep/ .el-tabs__active-bar {
  background-color: #229922 !important;
  /*background-color: blue !important;*/
}

/*导航条下方边框*/
/deep/ .el-tabs__nav-scroll {
  border-bottom: 1px solid #000000;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
}

/* 导航条下方边框阴影*/
/deep/ .el-tabs__nav-wrap {
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
}

/*导航条下方横线的样式*/
/deep/ .el-tabs__nav-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  /*原始颜色*/
  /*background-color: #dfe4ed;*/
  background-color: rgb(202, 212, 215);
  z-index: 1;
}

/*切换项下面的长条，控制其长度*/
/deep/ .box .el-tabs__active-bar.is-top {
  text-align: center;
  width: 0px !important; /* 不加important  不会生效，important会覆盖行内样式权限级别*/
  padding: 0 50px !important; /* 控制位置*/
  left: 8.5%; /* 根据实际情设置，尽量居中就行*/
  box-sizing: border-box;
  background-clip: content-box;
  background-color: yellow;
}

>>> .el-table {
  background: transparent;
}

/*>>> .el-table tr {*/
/*  height: 20px;*/
/*}*/

>>> .el-table .commonTableRowClass {
  color: #eeeaea;
  font-weight: 700;
  font-size: 12px;
  height: 35px;
  background: rgba(8, 101, 129, 0.2);
}

>>> .el-table .warnTableRowClass {
  color: yellow;
  font-weight: 700;
  font-size: 12px;
  height: 35px;
  background: rgba(8, 101, 129, 0.2);
}

>>> .el-table .urgencyTableRowClass {
  color: #f35858;
  font-weight: 700;
  font-size: 12px;
  height: 35px;
  background: rgba(8, 101, 129, 0.2);
}

>>> .el-table .boatStatusInfoTableRowClass {
  color: #eeeaea;
  height: 25px;
  background: rgba(8, 101, 129, 0.2);
}


>>> .el-table .el-table__cell {
  padding: 5px 0;
}

>>> .el-table .operationStatusTableRowClass {
  color: #eeeaea;
  font-weight: 500;
  font-size: 14px;
  height: 40px;
  background: rgba(8, 101, 129, 0.2);
}

>>> .el-table .operationStatusTableRowClass .el-table__cell {
  padding: 2px 0;
}

>>> .el-table .boatDetailInfoListTableRowClass {
  color: #eeeaea;
  font-weight: 500;
  font-size: 14px;
  height: 40px;
  background: rgba(8, 101, 129, 0.2);
}

>>> .el-table .boatDetailInfoListTableRowClass .el-table__cell {
  padding: 2px 0;
}


/*非常重要！！！其作用是设置表格鼠标移入某一行时的高亮效果*/
>>> .el-table tbody tr:hover > td {
  background-color: rgba(6, 63, 80, 0.3) !important;
}

/*>>> .el-table__fixed-right tbody tr:hover > td {*/
/*  background-color: transparent !important;*/
/*}*/

/*设置表头整体的class，注意：此处设置的背景色会被th，即表头单元格的样式给覆盖*/
>>> .el-table .tableHeaderRowClass {
  background-color: transparent;
}

>>> .el-table .tableHeaderRowClass .el-table__cell {
  padding: 0 0;
}

>>> .latestAlarmTableHeaderRowClass {
  background: transparent;
}

>>> .latestAlarmTableHeaderRowClass th {
  background: transparent;
}

/*设置el-table表头的高度*/
>>> .el-table .el-table__header-wrapper .latestAlarmTableHeaderRowClass th {
  height: 30px;
}

>>> .latestAlarmTableHeaderRowClass .el-table__cell {
  padding: 2px 0;
}

/*设置所有表头的默认高度为30px*/
>>> .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
  height: 30px;
}


/*设置表头单元格的样式*/
::v-deep .el-table th {
  background: rgba(8, 101, 129, 0.8);
  color: white;
  /*font-weight: 500;*/
}

::v-deep .el-table tr {
  /*height: 20px !important;*/
  /*color: #eeeaea;*/
  /*font-weight: 500;*/
}

/*设置表格每个单元格下边线的样式*/
>>> .el-table th.el-table__cell.is-leaf, >>> .el-table td.el-table__cell {
  border-bottom: 1px solid rgb(67, 114, 133);
}

/*设置表格底部横线的样式*/
>>> .el-table::before, .el-table--group::after, .el-table--border::after {
  content: "";
  position: absolute;
  background-color: rgba(8, 101, 129, 0.6);
  z-index: 1;
}

>>> .el-button--danger {
  color: #FFFFFF;
  background-color: #ff4949;
  border-color: #ff4949;
}

>>> .el-button--primary {
  color: #FFFFFF;
  background-color: #1890ff;
  border-color: #1890ff;
}

>>> .el-button--success {
  color: #FFFFFF;
  background-color: #13ce66;
  border-color: #13ce66;
}

>>> .el-button--warning {
  color: #FFFFFF;
  background-color: #ffba00;
  border-color: #ffba00;
}

>>> .el-button--mini {
  padding: 7px 15px;
  font-size: 12px;
  border-radius: 3px;
}

>>> .el-select--mini {
  width: 100px;
  /*height: 24px;*/
}

>>> .el-select--small {
  width: 100px;
  /*height: 24px;*/
}

/*>>> .el-select--small,*/
/*>>> .el-select--small .el-input__inner,*/
/*>>> .el-select--small .el-input__suffix {*/
/*  height: 20px;*/
/*}*/

>>> .el-date-editor {
  margin-bottom: 10px;
  background-color: rgba(8, 101, 129, 0.6);
}

>>> .el-date-editor .el-input__inner {
  background-color: transparent;
  border: 1px solid #a6abb7;
  color: white;
  /*width: 150px;*/
  height: 30px;
}


/*如下实测无效*/
/*>>> .el-picker-panel__body .el-picker-panel__content{*/
/*  background-color: rgba(8, 101, 129, 0.6);*/
/*}*/


>>> .boatDetailInfoListDialogClassName {
  width: 70%;
  background-color: rgba(8, 101, 129, 0.6);
  border-radius: 15px;
}

>>> .boatDetailInfoListDialogClassName .el-dialog__title {
  line-height: 24px;
  font-size: 20px;
  font-weight: 700;
  color: white;
}

>>> .boatDetailInfoListDialogClassName .el-dialog__header {
  text-align: center;
  padding: 10px;
  padding-bottom: 10px;
}

>>> .boatDetailInfoListDialogClassName .el-dialog__body {
  padding: 5px 15px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
  text-align: center;
}

>>> .boatDetailInfoListDialogClassName .el-table {
  width: 100%;
}

>>> .videoPlayDialogClassName {
  width: 1280px;
  /*margin-top: 4vh !important;*/
}

>>> .videoPlayDialogClassName .el-dialog__header {
  padding: 10px;
  padding-bottom: 10px;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  /*font-weight: 700;*/
}

>>> .videoPlayDialogClassName .el-dialog__header .el-dialog__title {
  line-height: 24px;
  font-size: 18px;
  /*color: #303133;*/
  color: white;
}

>>> .videoPlayDialogClassName .el-dialog__header .el-dialog__headerbtn {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 22px;
}

>>> .videoPlayDialogClassName .el-dialog__body {
  /*padding: 0 2px 5px;*/
  padding: 0;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
  background-color: rgba(0, 0, 0, 0.7);
}

.videoPlayingContainer {
  width: 1280px;
  /*width: 100%;*/
  height: 720px;
  /*height: 100%;*/
  /*background-color: black;*/
}

>>> .el-switch {
  height: 16px;
  line-height: 16px;
}

>>> .el-switch .el-switch__core {
  height: 16px;
  border-radius: 8px;
}

>>> .el-switch .el-switch__core:after {
  top: -1.2px;
  left: 0;
  /*margin-left: -16px;*/
}

>>> .el-switch.is-checked .el-switch__core:after {
  top: 0;
  left: 100%;
  margin-left: -16px;
  /*content: "";*/
  /*position: absolute;*/
  /*top: 1px;*/
  /*left: 1px;*/
  /*border-radius: 100%;*/
  /*-webkit-transition: all 0.3s;*/
  /*transition: all 0.3s;*/
  /*width: 16px;*/
  /*height: 16px;*/
  /*background-color: #FFFFFF;*/
}

.boatDetailInfoListDialogControl1 {
  float: right;
  margin-right: 45px;
  margin-bottom: 6px;
}

.boatDetailInfoListDialogControl1 span {
  color: white;
}

</style>

<!--全局样式-->
<style>
.operation-status-popover {
  /*background-color: green !important;*/
  line-height: 1;
  width: 650px;
  height: 850px;
  margin-top: 65px;
}

.operation-status-popover[x-placement^=right] {
  margin-left: 25px;
  /*background-color: #086581;*/
  background-color: rgba(8, 101, 129, 0.8);
  border-color: #086581;
  border-radius: 5px;
  /*height: 300px;*/
  /*不能添加overflow-y属性，否则会导致el-popover的小箭头不显示*/
  /*overflow-y: auto;*/
}

/*调整左侧小箭头的样式*/
.operation-status-popover[x-placement^=right] .popper__arrow {
  margin-top: -120px;
}

.operation-status-popover[x-placement^=left] .popper__arrow::after {
  border-left-color: #086581;
}

.operation-status-popover[x-placement^=right] .popper__arrow::after {
  border-right-color: #086581;
}

.operation-status-popover[x-placement^=bottom] .popper__arrow::after {
  border-bottom-color: #086581;
}

.operation-status-popover[x-placement^=top] .popper__arrow::after {
  border-top-color: #086581;
}

.alarm-status-popover {
  /*background-color: green !important;*/
  line-height: 1;
  width: 900px;
  height: 850px;
  /*margin-top: -150px;*/
}


.alarm-status-popover[x-placement^=right] {
  margin-left: 25px;
  /*background-color: #086581;*/
  background-color: rgba(8, 101, 129, 0.8);
  border-color: #086581;
  border-radius: 5px;
  /*height: 300px;*/
  /*不能添加overflow-y属性，否则会导致el-popover的小箭头不显示*/
  /*overflow-y: auto;*/
}

/*调整左侧小箭头的样式*/
.alarm-status-popover[x-placement^=right] .popper__arrow {
  /*margin-top: -120px;*/
}

.alarm-status-popover[x-placement^=left] .popper__arrow::after {
  border-left-color: #086581;
  /*margin-top: 110px;*/
}

.alarm-status-popover[x-placement^=right] .popper__arrow::after {
  border-right-color: #086581;
}

.alarm-status-popover[x-placement^=bottom] .popper__arrow::after {
  border-bottom-color: #086581;
}

.alarm-status-popover[x-placement^=top] .popper__arrow::after {
  border-top-color: #086581;
}
</style>
